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

JS

Client JavaScript running

5waiting

Hydration

React effects can run

6waiting

Fetch

Client data request started

7waiting

Fetch done

Client data response resolved

8waiting

UI

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

104.38

+0.55

Updated at

2026-08-22T19:51:43.496Z

Telemetry

Rendered at

07:51:43 PM

Data fetched at

07:51:43 PM

Render source

Cache

Hydrated

No

Request count

1

Last update

07:51:43 PM (27 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

07:51:43 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 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-08-22T19:51:43.498Z

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-08-22T19:51:43.498Z
Data fetched at
2026-08-22T19:51:43.494Z
Rendered on
Cache
Data source
English teaching dataset
Revalidate time
15 seconds

Behind the scenes

  1. Browser

    Request page

  2. CDN Cache

    Serve cached HTML

  3. Next.js Server

    Check revalidate timer

  4. Data API

    Regenerate in background

  5. 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.