Rendering components on the server side with code splitting in webpack

Question

I am trying to build a webapp using React, React Router and Webpack libraries, and taking advantage of server side rendering.

Now, I have a basic structure working - when I visit a URL, the page is rendered on the server, sent back to the client where React confirms that the output rendered on the client side matches with what's generated on the server and takes over from there.

My problem is when I try to open URLs which have to load components asynchronously.

When I visit a URL which has to load a dependency asynchronously, the server renders the output including all dependencies, but when it comes to the client, the markup which React renders does not include the asynchronously loaded components and therefore is different from server's and I get an error in the console which says

Warning: React attempted to reuse markup in a container but the checksum was invalid.

The way I see it the solution would be to either not render the asynchronously loaded components on server and lose out on the benefits of server side rendering or to somehow tell React to ignore the differences between the server and client, and not discard the server's markup, because I know that the component will eventually be loaded and markups will match.

Has anyone else come across this problem and knows what a good solution would be?

Answer 1

You need to also run match on the client side to load all the route components.

There's a fleshed out example available at https://github.com/rackt/example-react-router-server-rendering-lazy-routes .