SSR

Server-Side Rendering (SSR) is an application architecture where the HTML for your web page is generated on a server in response to a user’s request, rather than being built dynamically in the user’s browser via JavaScript.

While React was originally designed for Client-Side Rendering (CSR), the ecosystem has heavily shifted back toward SSR frameworks like Next.js and Remix.

How SSR Works in React

The Request: A user’s browser sends an HTTP GET request to yourwebsite.com/dashboard.
The Server Renders: A Node.js server receives the request. It executes your React components (<Dashboard />). During this process, it might fetch data from a database.
HTML Generation: The server converts the resulting Virtual DOM into a raw string of HTML using react-dom/server (e.g., renderToString).
The Response: The server sends this fully formed, content-rich HTML back to the browser.
First Paint: The browser instantly paints the HTML. The user can read the content immediately (fast First Contentful Paint / FCP).
Hydration: In the background, the browser downloads the React JavaScript bundle and “hydrates” the static HTML, attaching event listeners to make it interactive.

Advantages of SSR

SEO (Search Engine Optimization): Search engine crawlers receive a fully rendered HTML page, making it perfectly indexable without requiring the crawler to execute JavaScript. Link previews on social media work flawlessly.
Perceived Performance: Because the HTML is sent immediately, the user sees the content of the page much faster than in a CSR app, which would show a blank white screen while downloading JavaScript.
Slower Devices: Users on low-powered mobile devices or slow networks benefit greatly, as the heavy lifting of building the DOM is done by the powerful server.

Disadvantages of SSR

Server Costs: You must maintain and scale an active Node.js server to render the pages on every request. This is more expensive and complex than hosting static CSR files on a CDN.
TTFB (Time to First Byte): Because the server must build the page (and possibly wait for a database query) before responding, the initial server response time is slower than just serving a static HTML file.
The Uncanny Valley: Between the First Paint (when the user sees the HTML) and Hydration (when the JS finishes loading), the page looks ready but is completely unresponsive to clicks. If the JS payload is huge, this gap can be frustrating for users.

Interview Questions

Q: How does Server-Side Rendering (SSR) improve SEO?
A: Web crawlers (like Googlebot) immediately see fully-formed content when they request the page, rather than waiting to execute JavaScript to reveal the page content. This guarantees that all of your metadata, links, and content are indexed perfectly.