Server‑Side Rendering (SSR)

What is SSR?

Server‑Side Rendering (SSR) is the process of rendering a web page on the server instead of the client browser. The server returns fully populated HTML for each request, which improves initial load performance and SEO.

Benefits of SSR

• Faster Time‑to‑Content for users on slow connections.
• Better discoverability by search engines.
• Improved performance metrics (CLS, LCP, FID).
• Works without JavaScript enabled.

How SSR Works

When a request arrives:

1. The server executes the application’s rendering logic.
2. HTML markup is generated with data already embedded.
3. The server sends the markup to the client.
4. The client hydrates the markup, attaching event listeners.

SSR Example (Node.js + Express)

Below is a minimal SSR setup using Express and React.

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const App = () => React.createElement('div', null, 'Hello from SSR!');

const server = express();

server.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(React.createElement(App));
  const fullPage = `
    
    
      
      
${html}
    `;
  res.send(fullPage);
});

server.listen(3000, () => console.log('Server running on http://localhost:3000'));

FAQ

Is SSR compatible with SPA frameworks?

Yes. Frameworks like Next.js, Nuxt, and SvelteKit provide built‑in SSR support.

Does SSR increase server load?

Rendering on the server adds CPU overhead, but caching strategies (CDN, edge caching) can mitigate this.