Full-Stack React Projects - Second Edition

Injecting data into the React app

In the existing SSR code in the backend, we use ReactDOMServer to convert the React app to markup. We will update this code in express.js to inject the retrieved data into the MainRouter, as shown in the following code:

mern-mediastream/server/express.js

...loadBranchData(req.url).then(data => {       const markup = ReactDOMServer.renderToString(        sheets.collect(         <StaticRouter location={req.url} context={context}>             <ThemeProvider theme={theme}>                  <MainRouter data={data}/>             </ThemeProvider>          </StaticRouter>        )      )       ...  }).catch(err => {      res.status(500).send({"error": "Could not load React view with data"})  })...

We utilize the loadBranchData method to retrieve the relevant data for the requested view, then pass this data ...