Client-Side Rendering

The browser receives an empty shell and then fetches the data using JavaScript. This allows for rich interactive experiences like real-time filtering and complex state management, but can be slower on initial load.

Environment

Browser Window

Verification Lab

Refresh to see the 'Loading' state trigger in your browser.

Strategy

Rendered entirely in the browser using `useEffect`. Ideal for interactive dashboards, search interfaces, and private user areas.

Hydration

React takes over after JS loads. The server sends zero initial content.

Response Headers Lab

Response Headers

Cold start. No cache exists yet.

200 OK

Cache-Control:public, max-age=0, must-revalidate

Vary:Accept-Encoding, Cookie

X-Vercel-Cache:MISS

Infrastructure Layer

Architectural Insights

Hover over headers to reveal
Infrastructure Lifecycle Data.

Time-Travel Simulator

Use the timeline buttons at the top to simulate how headers evolve over time in a production environment.

Standard:

Unified Explicit Caching (v16)

Infrastructure Verified

Hydration Pipeline

Order of operations

Empty Shell

Server sends a minimal HTML file with almost no content.

Load JS

Browser downloads large JavaScript bundles (React + App code).

Data on Client

React executes in browser and makes API calls to fetch data.

Hydration

The page becomes interactive after JS finishes executing.

Implementation Blueprint

app/page.tsx

'use client';
import { useState, useEffect } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetched after the page loads in the browser
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);

  if (!data) return <Loader />;
  
  return (
    <div>{/* Render Data */}</div>
  );
}

CSR moves the rendering work to the user's device. While this increases the 'Time to Interactive', it enables the ultra-smooth transitions and state management that dynamic web apps require.

Live Demo

These products were fetched using Client-Side Rendering (CSR) in your browser.

Testing Tip

Refresh to see the "Initializing" state. Notice how the page shell loads first.Note: In this lab, we forced the CSR shell to be dynamic to show fresh cache headers.

Initializing Client Hydration...

Advanced Pattern: Selective Rendering

Scroll down to see the LazyHydrate component in action. Products after the first 4 are wrapped in an Intersection Observer. They won't actually mount or render until they enter the viewport, saving CPU cycles on the initial hydrate.

React stateuseEffect FetchIntersection Observer

Next Topic

React Server Components

Consolidate data fetching on the server and eliminate client-side waterfalls.