Next.js creates the HTML ahead of time, then every visitor gets the same static file.
Initial HTML
Build
Initial Paint State
Data in initial HTML
Yes
HTML generated by
Build
User sees first
Prebuilt 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
103.12
Updated at
2026-05-22T17:13:38.500Z
Telemetry
Rendered at
05:13:38 PM
Data fetched at
05:13:38 PM
Render source
Build
Hydrated
No
Request count
1
Last update
05:13:38 PM (6 ms ago)
Cache status
Cached
Update mode
Background refetch
useEffect Fetch
Telemetry
Rendered at
05:13:38 PM
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 build-driven.
Production update
Cached + background refetch
Naive update
Loader + client-only fetch
Where HTML is generated
Build
When
During next build
Rendered at
2026-05-22T17:13:38.501Z
Next.js executes the static page before users visit it.
Data is captured at build time.
The finished page is saved as deployable static output.
Each request gets the already generated HTML.
No request-time rendering is needed.
Now happening
Build Process: Next.js executes the static page before users visit it.
Behind the scenes
Build Process
Run next build
Data API
Fetch posts once
Build Process
Write static HTML
CDN Cache
Serve same file
Browser
Display instantly
Static route
force-static tells Next.js the initial page can be generated at build time.
Stable timestamp
In production, the initial render timestamp stays the same until the next build.
Client updates still work
TanStack Query and the naive fetch both run in the browser, so live updates are separate from static page generation.