How to use React.lazy with SSR?

help
1

Hey guys,
I’m having a little issue with React.lazy and SSR. I’ve moved from renderToString() to renderToNodeStream(). The issue is that my page is always empty on the first request after booting up the server. After that, the content is successfully loaded. I guess the problem is that renderToNodeStream doesn’t wait until the component has been loaded on the server during the first requests. Because it is loaded after that, all other requests are getting the correct data.

Does anyone know how I can solve this issue? I know that renderToNodeStream is deprecated, but the Meteor docs don’t show an updated version. Currently I’m doing a “dirty” fix to load all lazy loaded components after starting up my server:

server/main.js


const Start = React.lazy(() => import("../pages/start/start"));

if(Meteor.isServer) {
    import ReactDOMServer from 'react-dom/server';
    try {
      ReactDOMServer.renderToString(<Start />); // Just called once during start to load it, not sent to the visitor.
    }
    catch (e) {

    }
}
2

Would like to know how this works, too.

Currently I am running react17 still, since meteor-react-router-ssr does only support that, and here there is a trick with including fast-render applied, so that all “useTracker” hooks with collection function calls are actually included in SSR (= real data in the HTML, not the shitshow with useEffect API data). Works great, but as I said currently only works with React17.