SSR

Server Side Rendering

The server fetches the data first and sends ready-to-read HTML for that request.

Initial HTML

Server

Initial Paint State

Data already present in HTML

Before hydration

Data in initial HTML

Yes

HTML generated by

Server

User sees first

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

102.53

+2.09

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

Naive Pattern

Client Fetching
useEffect FetchNo CacheClient Only
Local state is empty until fetch resolves

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

1Browser

Request page

The browser asks Next.js for /ssr.

RUNNING / Document request
2Next.js Server

Run server component

The page function executes on the server for this request.

WAITING / Server runtime
3Data API

Fetch posts on server

Data is loaded before HTML is sent to the browser.

WAITING / Server fetch
4Next.js Server

Generate full HTML

Next.js renders the posts into the document response.

WAITING / Rendered HTML
5Browser

Display immediately

The browser receives useful HTML without a client data loader.

WAITING / Hydration follows

Now happening

Browser: The browser asks Next.js for /ssr.

Rendered at
2026-05-13T05:30:24.222Z
Data fetched at
2026-05-13T05:30:24.219Z
Rendered on
Server
Data source
English teaching dataset
Revalidate time
None

Behind the scenes

  1. Browser

    Request page

  2. Next.js Server

    Run server component

  3. Data API

    Fetch posts on server

  4. Next.js Server

    Generate full HTML

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