SSR renders a page on the server for every single request, ensuring that the data is always fresh when the user visits.
Interactive Simulation Engine
SSR: Request-Time Rendering
Every request generates a fresh response
User Request
Compute (At Edge)
LIVE DATA
Click 'Run Request' to see what happens when a user visits an SSR page.
Executable Code Workbench
page.tsx
Live Code Editor1// In App Router, a component is dynamic (SSR)
2// if it uses dynamic functions or headers.
3import { headers } from 'next/headers'
4
5export default async function Page() {
6 const headerList = await headers()
7 const userAgent = headerList.get('user-agent')
8
9 return <div>Your browser: {userAgent}</div>
10}Mental Model
Like a chef cooking a fresh meal the moment you place an order. It's custom-made for that specific request.
Why This Exists
To handle highly dynamic data (like a user's bank balance or search results) that changes too frequently to be pre-rendered.
Critical Note
"SSR and RSC are the same. Not quite. SSR is the *process* of turning components into HTML for the initial paint. RSC is a *type* of component that can be used during that process but never executes on the client."