Server-Side Rendering (SSR)

In 2012, Twitter rebuilt their web app as a pure CSR single-page application. The result: users stared at a blank screen for 5+ seconds on every page load while the JavaScript bundle downloaded and executed. Engagement dropped. Time-to-first-tweet (their key metric) degraded badly.

Twitter reversed course and moved back to server-side rendering. The server now renders the initial HTML with the first batch of tweets already embedded. Users see content within 1 second. The JavaScript still loads in the background to add interactivity, but the critical first impression happens immediately.

Server-side rendering means the server generates the complete HTML for every request. The browser receives a fully rendered page, paints it immediately, and then "hydrates" it with JavaScript for interactivity. You get the fast first paint of a static page and the dynamic behavior of a SPA.

Here is what happens when a user visits an SSR page:

1. The browser sends a GET request to the server.
2. The server runs the page's data-fetching logic. In Next.js, this is the Server Component or getServerSideProps. The server queries the database, calls APIs, assembles the data.
3. The server renders the React component tree to HTML. This is renderToString() or renderToPipeableStream() in React.
4. The server sends the fully rendered HTML to the browser. The browser paints it immediately. The user sees content.
5. The browser downloads the JavaScript bundle in the background.
6. React "hydrates" the page. It attaches event listeners to the existing HTML, making buttons clickable, forms submittable, and state interactive. The page is now fully interactive.

The key insight: steps 4 and 5 happen in parallel. The user sees content at step 4, and the JS loads concurrently. With CSR, the user sees nothing until step 5 completes.

Time to First Byte (TTFB) with SSR is higher than CSR because the server has to do work (data fetching + rendering) before responding. A typical SSR TTFB is 200-800ms depending on database queries. CSR TTFB is near-instant because the server just returns a static HTML shell. But the user-visible content appears faster with SSR despite the higher TTFB.