React: How does SSR work in React?

SSR (Server-Side Rendering) is generating HTML on the server and sending the ready page to the client.

Simple analogy: Imagine you are ordering pizza.

• CSR (Client-Side Rendering, regular React): they bring you a box with dough, sauce, cheese, and instructions "Assemble yourself". While you are assembling — you are looking at an empty box (spinner).
• SSR (Next.js): they bring you ready-made pizza. You can eat immediately.

How SSR works (simplified):

1. User enters the site → browser sends a request to the server.
2. Server launches React components, turns them into HTML.
3. Server sends ready HTML + JavaScript (React code).
4. User immediately sees the page (HTML is ready).
5. Browser loads JavaScript → React "activates" the page (hydration).

Streaming SSR (React 18+): Previously the server waited for all data to load and only then sent HTML. Streaming SSR sends HTML in parts:

• First: header, menu, spinner.
• Then: main content (when data is loaded). User sees the page faster.

React 19 + Server Components: Server components execute ONLY on the server, their code is not sent to the client. This reduces bundle size.

SSR disadvantages:

• Requires a server (cannot be hosted statically).
• Hydration can be expensive (if HTML is large).
• Harder debugging (errors on server and client).