The server fetches the data first and sends ready-to-read HTML for that request.
Initial HTML
Server
Initial Paint State
Data in initial HTML
Yes
HTML generated by
Server
User sees first
Content immediately
Real-Time Rendering Timeline
Request
Document request started
HTML
HTML response received
FCP
First contentful paint
JS
Client JavaScript running
Hydration
React effects can run
Fetch
Client data request started
Fetch done
Client data response resolved
UI
React committed new data
Live Comparison
TanStack Query
Live Backend Metric
102.53
Updated at
2026-05-13T05:30:24.221Z
Telemetry
Rendered at
05:30:24 AM
Data fetched at
05:30:24 AM
Render source
Server
Hydrated
No
Request count
1
Last update
05:30:24 AM (24 ms ago)
Cache status
Cached
Update mode
Background refetch
useEffect Fetch
Telemetry
Rendered at
05:30:24 AM
Data fetched at
Pending
Render source
Browser
Hydrated
No
Request count
0
Last update
Pending
Cache status
No cache
Update mode
Blocking fetch
What to notice
Initial render
Initial render is server-driven.
Production update
Cached + background refetch
Naive update
Loader + client-only fetch
Where HTML is generated
Server
When
On every request
Rendered at
2026-05-13T05:30:24.222Z
The browser asks Next.js for /ssr.
The page function executes on the server for this request.
Data is loaded before HTML is sent to the browser.
Next.js renders the posts into the document response.
The browser receives useful HTML without a client data loader.
Now happening
Browser: The browser asks Next.js for /ssr.
Behind the scenes
Browser
Request page
Next.js Server
Run server component
Data API
Fetch posts on server
Next.js Server
Generate full HTML
Browser
Display immediately
Dynamic route
force-dynamic tells Next.js to render this route on every request.
HTML includes data
Posts are available before the browser receives the document.
Hydrated live data
The page can pass a live snapshot to TanStack Query so the left panel starts without a duplicate loading state.