Here at tyl.io, we often encounter interesting challenges. We’ve had a universal, code-split app for a while now, and as part of our latest performance release (out soon!), we’ve decided to upgrade to the new React-Router 4.
My name is Emile Cantin, and I'm a full stack developer and lead application engineer here at Tylio.
While studying the new docs to familiarize myself with the new API, I encountered this paragraph:
Code-splitting + server rendering
We’ve tried and failed a couple of times. What we learned:
- You need synchronous module resolution on the server so you can get those bundles in the initial render.
- You need to load all the bundles in the client that were involved in the server render before rendering so that the client render is the same as the server render. (The trickiest part, I think its possible but this is where I gave up.)
- You need asynchronous resolution for the rest of the client app’s life.
We determined that google was indexing our sites well enough for our needs without server rendering, so we dropped it in favor of code-splitting + service worker caching. Godspeed those who attempt the server-rendered, code-split apps.
Challenge accepted! Let’s go through these, one at a time.