Full-Stack React Projects

Hydrate instead of render

Now that the React components will be rendered on the server side, we can update the main.js code to use 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 server, making ...