CSR

Summary

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

How to Learn This

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.

SSR

SSG

More topics in Next.js

App Router Pages Router SSR SSG ISR Server Components Client Components Dynamic Routes Metadata Image Optimization Middleware Server Actions API Routes SEO Deployment

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — free on the InsideEdge app.

Download