ISR

Incremental Static Regeneration

Visitors get cached HTML quickly while Next.js refreshes the page after the revalidate window.

Initial HTML

Build + Cache

Initial Paint State

Cached HTML, may update later

Before hydration

Data in initial HTML

Yes

HTML generated by

Cache

User sees first

Cached content immediately

Real-Time Rendering Timeline

Request to interactive UI

Performance API

1waiting

Request

Document request started

2waiting

HTML

HTML response received

3waiting

FCP

First contentful paint

4waiting

Client JavaScript running

5waiting

Hydration

React effects can run

6waiting

Fetch

Client data request started

7waiting

Fetch done

Client data response resolved

8waiting

React committed new data

Live Comparison

Production vs naive client updates

Same endpoint, same 3s cadence

TanStack Query

Production Pattern

Cached

TanStack QueryCachedBackground Refetch

Live Backend Metric

103.83

+1.58

Updated at

2026-06-26T15:43:37.379Z

Telemetry

Rendered at

03:43:37 PM

Data fetched at

03:43:37 PM

Render source

Cache

Hydrated

Request count

Last update

03:43:37 PM (24 ms ago)

Cache status

Cached

Update mode

Background refetch

useEffect Fetch

Naive Pattern

Client Fetching

useEffect FetchNo CacheClient Only

Local state is empty until fetch resolves

Telemetry

Rendered at

03:43:37 PM

Data fetched at

Pending

Render source

Browser

Hydrated

Request count

Last update

Pending

Cache status

No cache

Update mode

Blocking fetch

What to notice

Initial render

Initial render is cache-driven.

Production update

Cached + background refetch

Naive update

Loader + client-only fetch

Where HTML is generated

Build + Cache

When

At build time, then after revalidate

Rendered at

2026-06-26T15:43:37.380Z

1Browser

Request page

The browser asks for /isr.

RUNNING / Document request

2CDN Cache

Serve cached HTML

The user gets the existing static response immediately.

WAITING / Cache hit

3Next.js Server

Check revalidate timer

Next.js checks whether the cached page is older than 15 seconds.

WAITING / Cache metadata

4Data API

Regenerate in background

After the interval, Next.js fetches fresh data and rebuilds the page.

WAITING / Background fetch

5CDN Cache

Update cached page

The next visitor receives the refreshed HTML.

WAITING / New cache entry

Now happening

Browser: The browser asks for /isr.

Rendered at: 2026-06-26T15:43:37.380Z
Data fetched at: 2026-06-26T15:43:37.376Z
Rendered on: Cache
Data source: English teaching dataset
Revalidate time: 15 seconds

Behind the scenes

Browser
Request page
CDN Cache
Serve cached HTML
Next.js Server
Check revalidate timer
Data API
Regenerate in background
CDN Cache
Update cached page

Revalidate interval

The route can serve cached HTML and regenerate after the configured interval.

Fast cached response

Users get existing HTML quickly while Next.js handles regeneration when needed.

Two update paths

ISR updates page HTML over time; client data fetching updates the live panel every few seconds.