Next.js Rendering Foundations
Rendering strategy is the primary architectural lever in Next.js applications, dictating TTFB, Core Web Vitals, server infrastructure cost, and user interactivity.This module covers the core trade-offs between Client-Side Rendering (CSR), traditional Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), and Next.js 16 Partial Prerendering (PPR) with Cache Components.Prepare for senior-level interviews by mastering HTTP chunked transfer encoding, selective hydration boundaries, and when to combine static shells with dynamic streaming slots.
Evolution of Web Rendering: CSR, SSR, SSG, and ISR
CSR ships a minimal HTML shell and executes JavaScript in the browser. SSR renders full HTML dynamically on every request on the server. SSG generates static HTML once at build time for instant CDN distribution, while ISR adds background regeneration using stale-while-revalidate headers without full rebuilds.
Streaming SSR with React Suspense
Streaming SSR uses HTTP chunked transfer encoding to send HTML to the browser incrementally. By wrapping slow asynchronous components in React Suspense boundaries, Next.js streams the static layout and fallback skeletons immediately, unblocking the browser render pipeline before slow database queries finish.
Incremental Static Regeneration (ISR) Internals
ISR enables static pages to update incrementally in the background without rebuilding the entire application. When a request arrives after the revalidation window, the edge CDN serves the stale cache immediately while triggering a background worker. Upon successful render, the cache is updated atomically.
Understanding React Server Components (RSC) vs SSR
SSR is a rendering technique that produces initial HTML strings from React components, but still ships their full JavaScript bundle to the browser for hydration. RSC is a component architecture where Server Components execute exclusively on the server, shipping zero JavaScript to the client and streaming virtual DOM payloads over the wire.
Partial Prerendering (PPR) & Cache Components
Partial Prerendering (PPR) combines static shell pre-rendering with dynamic streaming slots within a single HTTP response. At build time, Next.js generates static HTML for static segments and punches holes around dynamic Suspense boundaries. At request time, the static shell is served instantly from edge cache while dynamic slots stream in parallel.