Rendering Strategies

CSR, SSR, SSG, streaming SSR, islands and server components as points on a curve between where work happens and when the page becomes interactive.

Client-Side Rendering

The server sends a shell, the browser downloads a bundle, runs it, then asks for data. Everything a person can read sits behind that chain.

Q · What has to finish before a client-rendered page shows anything, and who is excluded while it waits?
Server-Side Rendering

The server fetches the data and renders the markup per request, so content arrives early. Interactivity does not arrive with it.

Q · What does rendering on the server actually move, and what does it leave exactly where it was?
Static Site Generation

Render every page once at build time and serve the files from an edge. The cheapest thing to serve, and the hardest thing to keep current.

Q · What does moving rendering to build time actually buy, and what does it make expensive?
Hydration

The client attaches behaviour and state to markup that already exists. Until it finishes, the page looks finished and is not.

Q · How does server-rendered HTML become an interactive application, and what is the page during the interval in between?
Hydration Mismatch

The client renders something different from what the server sent. The framework cannot quietly pick a winner, because it does not know which one is right.

Q · Why does the client disagree with the server-rendered markup, and why can the framework not just fix it?
Islands and Partial Hydration

Ship JavaScript only for the regions that are genuinely interactive. The saving is real; the cost is a component model that must declare its boundaries.

Q · Why is the whole page being hydrated when only three things on it do anything?
Streaming Server Rendering

Send the page in pieces as each part becomes ready. One slow region stops holding the whole document hostage — and once the first byte is out, you cannot take it back.

Q · Why should the server send an incomplete page, and what becomes harder once it has?
Server Components

Components that run only on the server and never ship. A framework-specific answer to "how much of this tree needs to be code in the browser at all".

Q · What changes when a component runs only on the server and its code never reaches the browser?
Choosing a Rendering Strategy

There is no winner. There are seven questions, and a real application usually answers them differently for different routes.

Q · Which rendering strategy should this route use, and what am I actually deciding when I pick one?