0Pricing
React Academy · Lesson

How React SSR Works Under the Hood

Trace the renderToString/renderToPipeableStream path and how the client picks up hydration.

The Problem SSR Solves

Client-side React requires JavaScript to render. Users see a blank page until JS loads and runs. SSR pre-renders HTML on the server so users see content immediately, improving perceived performance and SEO.

renderToString

The original SSR API: renderToString(<App />) synchronously renders the component tree to an HTML string on the server.

import { renderToString } from 'react-dom/server';
import App from './App';

// In an Express handler:
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body></html>
  `);
});

All lessons in this course

  1. How React SSR Works Under the Hood
  2. Hydration Errors: Causes & Fixes
  3. Selective Hydration & Streaming HTML
  4. Islands Architecture Pattern
← Back to React Academy