Server-Side Rendering

What happens

1. Request,the user hits the URL. There's no cached HTML to serve.
2. Render, the Node server runs the React tree top-to-bottom, awaits any data fetches, and produces a complete HTML document.
3. Send, HTML is streamed to the browser. The user sees content immediately.
4. Hydrate, the JS bundle arrives and React attaches handlers, making the page interactive.

The code

// app/rendering/ssr/page.tsx
import { Suspense } from "react";
import { connection } from "next/server";

export default function Page() {
  return (
    <Suspense fallback={<Skeleton />}>
      <Dynamic />
    </Suspense>
  );
}

async function Dynamic() {
  await connection(); // mark as request-time
  const now = new Date().toISOString();
  const token = crypto.randomUUID().slice(0, 8);
  return <span>{now} · {token}</span>;
}

connection() is the marker that pulls a component out of prerendering: anything that runs after it has to wait until a real visitor shows up. With Cache Components enabled, request-time work like this has to sit inside a <Suspense> boundary, so the static shell can flush first and the dynamic part streams in behind it.

Trade-offs

• Good: always fresh, can read cookies and headers, great for personalised content.
• Bad: every request burns server time; latency depends on your data sources.