Next.js SSR means the page's React tree is rendered to HTML on the server for each request, before the client gets anything.

Why SSR

How it works (App Router, Next 13+)

// app/products/page.tsx — Server Component, SSR by default
export default async function Page() {
  const products = await fetch("/api/products", { cache: "no-store" }).then(r => r.json());
  return <ProductGrid items={products} />;
}

• Server Components run on the server only — no client JS for them.
• Client Components ("use client") hydrate on the browser.
• Mixed tree: server renders the whole page; client takes over interactive parts.
• Streaming SSR: the server flushes HTML in chunks as data resolves (Suspense boundaries gate the chunks).

How it works (Pages Router, legacy)

// pages/products.tsx
export async function getServerSideProps(ctx) {
  const products = await fetchProducts();
  return { props: { products } };
}

export default function Page({ products }) { ... }

getServerSideProps runs on every request; result feeds the React tree, which is rendered to HTML.

Hydration

After HTML arrives, the bundle attaches event handlers to the existing DOM. With React Server Components, less JS is shipped — server-only components don't hydrate at all.

Caching modes (App Router)

• cache: "force-cache" (default for fetch in server components) — like SSG.
• cache: "no-store" — dynamic SSR per request.
• next: { revalidate: 60 } — ISR; cached for 60s, then re-rendered.

Tradeoffs

When NOT to use SSR

• Pages behind auth where SEO doesn't matter — CSR is cheaper.
• Pages whose data changes rarely — SSG / ISR is better.
• Highly interactive editors — first paint matters less than hydration cost.

Edge SSR

Deploy SSR to edge runtimes (Cloudflare Workers, Vercel Edge) for low latency globally. Trade some Node API support for proximity to users.

Common pitfalls

• Long-running data fetches blocking TTFB — cache or stream.
• Server-only code accidentally in client components (env vars, secrets).
• Hydration mismatches from time/random in render.
• Forgetting that fetch is cached by default in App Router.

Interview framing

"Next.js renders the React tree on the server per request and sends fully-formed HTML. In the App Router, server components run server-only with no client JS shipped for them; client components hydrate where interactivity is needed. Streaming SSR flushes HTML in chunks via Suspense — partial content arrives while slow data resolves. Cache modes — static, dynamic, ISR — let you dial the tradeoff between freshness and TTFB. SSR wins for SEO, LCP, social previews, personalized content. It costs server time and complexity. Watch for hydration mismatches and accidental leakage of server code into the client bundle."