{ TECH BLOG }

React has undergone a fundamental shift with Server Components becoming the default rendering model. Next.js 15 has fully embraced this paradigm, and the ecosystem has matured significantly. If you haven't revisited React architecture recently, here's what's changed.

The key mental model shift:

• Server Components (default) — Render on the server, zero JavaScript sent to client. Perfect for data fetching, database queries, and content display.
• Client Components ('use client') — Interactive components with state, effects, and event handlers. Only use when you need interactivity.

// Server Component (default) - no 'use client' directive
async function ProductList() {
  const products = await db.product.findMany(); // Direct DB access!
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

// Client Component - needs interactivity
'use client';
function AddToCart({ productId }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Add ({count})</button>;
}

• Parallel Routes — Render multiple pages simultaneously in the same layout
• Intercepting Routes — Show modals while maintaining URL state
• Server Actions — Mutate data directly from forms without API routes
• Streaming — Progressive rendering with Suspense boundaries
• Partial Prerendering (PPR) — Combine static and dynamic content in the same route

The shift to Server Components has delivered measurable performance improvements: 30-50% reduction in JavaScript bundle size, faster Time to Interactive (TTI), and improved Core Web Vitals scores. Combined with React's built-in optimizations (automatic memoization, concurrent features), modern React apps are significantly faster than their SPA predecessors.