Client-Side Rendering (CSR)

Open Gmail. Click on an email. Notice how the page does not reload. Click back. Instant. Compose a new email. The compose window slides up without any flash of white. Switch between Inbox, Sent, and Drafts. No full-page reload, ever.

Gmail is a single-page application (SPA) powered by client-side rendering. The browser downloads a JavaScript bundle once, and from that point forward, every navigation and interaction happens by manipulating the DOM directly in the browser. The server never sends another full HTML page.

This is client-side rendering: the server ships an empty HTML shell and a JavaScript bundle. The browser executes the JS, fetches data from APIs, and builds the entire UI in the browser. The first load is slow (the bundle must download and execute), but every interaction after that is instantaneous because there is no round-trip to the server.

When you visit a CSR app, here is what happens step by step:

1. The browser requests the URL. The server returns a minimal HTML file. Often it is literally just a <div id="root"></div> and a <script> tag.
2. The browser downloads the JavaScript bundle. For a React app, this is typically 150-500KB gzipped. On a 3G connection, that is 2-5 seconds of download time.
3. The JS executes and takes over. React (or Vue, or Svelte) mounts, creates the virtual DOM, and renders the initial screen. But there is no data yet.
4. The app fetches data from APIs. fetch('/api/users'), fetch('/api/products'). Each one is another network round-trip.
5. The data arrives, the app re-renders with real content, and the user finally sees the page.

The problem is obvious: steps 2 through 5 all happen sequentially. The user stares at a blank white screen (or a spinner) until the JS downloads, parses, executes, fetches data, and renders. Google measures this as Time to First Contentful Paint (FCP). For a typical CSR app, FCP is 2-5 seconds on mobile. For server-rendered pages, it is under 1 second.

Bundle size is the bottleneck. Every npm package you import ends up in the bundle. A React app with a charting library, a date picker, a rich text editor, and an animation library easily hits 1MB+ before gzip. Airbnb's initial React SPA had a 3MB bundle that took 10+ seconds to parse on mid-range Android phones.