React provides a way to render components to strings specially for the case of server-side rendering. This is done through the react-dom
package, that manages the React to dom conversion. But, we don't need to just render a view, but the right view. That is where isomorphic routing comes into picture.
As we said in the beginning of the chapter, there are several options for routing in React, and we will continue using react-router
for it.
Let's go.
Rendering on the server is a bit different. When we get a request, we need to figure out which is the right route and serve the resource, maybe along with initial client state data.
The basic idea is that we wrap the app in a stateless <StaticRouter>
instead of a <BrowserRouter>
. The main difference between these two routers is that the location of the static router never changes, hence useful for our case, where we only need to compute the needed route and send the view back to the client.
We will...