document server-side rendering
Closed this issue · 4 comments
i noticed you say in webpack/react-starter that you cannot prerender routes that use this loader.
am i right to assume react-proxy/unavailable is merely to get a working bundle for node environments, but that it will not prerender the html?
React expects that the prerendering is equal to the initial client-side rendered app. The initial client-side rendered app doesn't include the on-demand loaded part (because it's not loaded yet), so the prerendings must not include this part, because elsewise it wouldn't match the initial rendered part.
There is an alternative approch, which would require the server to decide which on-demand loaded chunks are required to make a full initial render and embed these chunk as script tags into the page. The initial render could than include these stuff too. This would require pretty complex logic to determine which chunks are required for an initial render.
So, I found a way to get prerendering working with react proxy loader, webpack, and node. Here's a very basic example, showing how I set up my server rendering, webpack, and routes:
https://gist.github.com/matthewoden/0ef78e5dc6ee04b6aa1e
codesplit away!
Like @matthewoden , my config uses the proxy loader for client code builds in webpack, and ommit this loader in server side builds. You get a checksum failure, but I really only care that the page is indexable. If it re-renders client-side, no big.
@jsg2021 The proof of concept I linked above works without a checksum failure, if you're interested (and haven't moved on to RR1.0 yet). It loads three js files at the bottom of the page - common.js files, your app's boostrap, and the resolved proxy for the current route.
By dynamically including the current route on the page, the module doesn't proxy, and resolves itself as if it was always present. Eliminates any checksum mismatch issues.