Stop 11 · Next.jsTopics · 4/16

CSR

In short

With client-side rendering, the browser gets a light page and JavaScript fills in the content afterwards. It's how classic React apps work, and it's still the right pick for some screens.

Client-Side Rendering — the browser downloads a minimal HTML shell and JavaScript renders the content after load, common in traditional single-page apps.

The jaadu assembles a flat-pack wooden chair with a screwdriver, parts spread on the floor.

Think of it like this

IKEA furniture

The shop sends you a flat box of parts and a manual. You build the chair at home. CSR sends the browser the parts (JavaScript) and the browser assembles the page itself. Quick to ship, but you wait while it builds.

Watch it happen

The score loads in the browser

Browser

Next server

/api/score

GET /match

1/5The browser asks for the page.

The big ideas

What you need to know

Data loads in the browser

The page arrives first, then useEffect or a library like SWR fetches data and fills it in.

Weaker for SEO

Content fetched in the browser isn't in the first HTML, so crawlers and link previews may miss it.

Great for private, live screens

Dashboards behind login, chat windows and editors don't need SEO and change constantly.

Still prerendered in Next.js

Client Components still get an initial HTML render on the server. Only the data fetched in useEffect waits for the browser.

See it in code

Walk through the code

tsx

1"use client";2import { useEffect, useState } from "react";3 4export default function LiveScore() {5  const [score, setScore] = useState<string | null>(null);6 7  useEffect(() => {8    const load = () => fetch("/api/score").then((r) => r.json()).then((d) => setScore(d.text));9    load();10    const id = setInterval(load, 10_000);11    return () => clearInterval(id);12  }, []);13 14  return <p>{score ?? "Loading score..."}</p>;15}

1/4Marks this file as a Client Component, so hooks and timers work.

This widget fetches in the browser and refreshes every 10 seconds. The first HTML only shows 'Loading score...'.

Save yourself the pain

Common mistakes

Oops

Fetching blog content in useEffect, then wondering why Google shows a blank page.

Do this instead

Fetch public, SEO-critical content in a Server Component so it's in the HTML.

Oops

Making the whole page a Client Component for one live widget.

Do this instead

Keep the page on the server and make only the live widget a Client Component.

Your mission

See CSR with your own eyes

~15 min

Quick check

Which screen suits client-side data fetching best?

Go deeper

1Build a component that intentionally renders only client-side (`'use client'`).
2Compare the initial load experience of a CSR page vs an SSR/SSG one.
3Learn why heavy CSR can hurt SEO and perceived performance.