In order to load data for the React views when these are rendered on the server, we will need to list the frontend routes in a route configuration file. This file may then be used with the react-router-config module, which provides static route configuration helpers for React Router.

We will first install the module by running the following command from the command line:

yarn add react-router-config 

Next, we will create a route configuration file that will list frontend React Router routes. This configuration will be used on the server to match these routes with incoming request URLs, to check whether data must be injected before the server returns the rendered markup in response to this request.

For the route configuration in MERN Mediastream, we will only list the route that renders the PlayMedia component and demonstrate how to server-render a specific component with data injected from the backend. The route configuration will be defined as follows:

mern-mediastream/client/routeConfig.js

import PlayMedia from './media/PlayMedia' 
import { read } from './media/api-media.js' 
const routes = [
  {
    path: '/media/:mediaId',
    component: PlayMedia,
    loadData: (params) => read(params)
  }
]
export default routes 

For this frontend route and PlayMedia component, we specify the read fetch method from api-media.js as the loadData method. This can then be used to retrieve and inject the data into the PlayMedia view when the server generates the markup for this component, after receiving a request at /media/:mediaId. In the next section, we will use this route configuration to update the existing SSR code on the backend.