SSR — Server-Side Rendering

SSR means the HTML for this page is generated on the server FRESH, for every single request, then sent to the browser. Compare this to a Vite SPA (ReactNotes), where the browser gets an almost-empty HTML shell and has to run JavaScript before anything appears.

Explain it like I'm 5

Imagine ordering food. SSR is a restaurant that cooks your meal fresh, from scratch, the moment you order it — always current, but takes a little kitchen time per order. Static rendering(next page) is more like a bakery case: the food was made once this morning and just handed to whoever asks, instantly — but it's the same food for everyone.

1. force-dynamic makes this an SSR route

Refresh this page — the timestamp below changes every time, proving the server re-ran this component for your specific request instead of serving a cached copy.

// app/ssr-demo/page.tsx
export const dynamic = 'force-dynamic'

export default async function SsrDemoPage() {
  const renderedAt = new Date().toISOString()
  return <p>Rendered on the server at: {renderedAt}</p>
}

Live result

Rendered on the server at: 2026-08-01T02:53:40.396Z

Reload this page — the value changes every time.

2. Why SSR

Use SSR for pages whose content depends on the specific request — a logged-in user's dashboard, live stock prices, search results — anything where 'the same HTML for everyone, always' would be wrong.

// SSR is also what happens automatically whenever a page reads
// per-request data, without needing "force-dynamic" explicitly:
export default async function Dashboard() {
  const cookieStore = await cookies()      // per-request -> forces dynamic
  const user = await getUser(cookieStore)
  return <p>Welcome, {user.name}</p>
}