Frameworks & RSC
React, Next.js, and the Server Component revolution.
The React Ecosystem
React won the framework war. But how we write React has fundamentally changed with the introduction of Server Components.
Rendering Strategies
CSR (Client-Side Rendering)
- Standard React (
create-react-app/ Vite). - Server sends empty HTML +
bundle.js. Browser executes JS to render UI. - Pros: Cheap hosting (S3/CDN). Great interactivity.
- Cons: Bad SEO. Slow Initial Load (FCP).
SSR (Server-Side Rendering)
- Next.js / Remix.
- Server generates HTML on every request.
- Pros: Great SEO. Fast FCP.
- Cons: Expensive (Requires Node.js server). "Hydration" cost (Browser still needs to re-run JS to make it interactive).
RSC (React Server Components)
The new paradigm (Next.js App Router).
The Concept: Components are split into two types:
- Server Components (Default): Render only on the server. They never ship JS to the browser. They can access the DB directly.
- Client Components (
'use client'): Standard React components (State, Effects, Event Listeners).
The Benefit: You can render a massive markdown parser or date library on the server, and send only the result (HTML) to the client. Zero bundle size impact.
State Management
Stop putting everything in Redux.
- Server State: (Data from API). Use React Query (TanStack Query) or
SWR. It handles caching, re-fetching, and loading states. - URL State: (Filters, Pagination). Put it in the URL query params (
?page=2). This makes the state shareable. - Local State:
useState. For toggling modals/accordions. - Global Client State: Zustand. Use only for things truly global (User Session, Theme, Shopping Cart).
Effect Chains
Avoid useEffect for derived state.
- Bad:
useEffect(() => setFullName(first + last), [first, last]) - Good:
const fullName = first + last;(Calculated during render).