← React Beginner Questions - Set 5 Q44

What is server-side rendering (SSR) in React?

React Beginner Questions - Set 5

The HTML is produced on the server so the first paint contains content; React then takes over in the browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// server.js  (Express + React 18)
import express from 'express';
import { renderToString } from 'react-dom/server';
import App from './App';

const app = express();

app.get('*', (req, res) => {
  const html = renderToString(<App url={req.url} />);
  res.send(`<!doctype html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/client.js"></script>
    </body></html>`);
});

app.listen(3000);

What to notice

• `renderToString` runs your components on the server; anything in `useEffect` does not run there.
• The client bundle then hydrates the markup instead of rendering from scratch.
• Frameworks (Next.js, Remix) exist because wiring data loading, routing and hydration by hand is the hard part.