Full-Stack React Projects - Second Edition

Hydrate instead of render

Now that the React components will be rendered on the server-side, we can update the main.js code so that it uses ReactDOM.hydrate() instead of ReactDOM.render():

import React from 'react'import { hydrate } from 'react-dom'import App from './App'hydrate(<App/>, document.getElementById('root'))

The hydrate function hydrates a container that already has HTML content rendered by ReactDOMServer. This means the server-rendered markup is preserved and only event handlers are attached when React takes over in the browser, allowing the initial load performance to be better.

With basic server-side rendering implemented, direct requests to the frontend routes from the browser address bar can now be handled properly by the ...