sirpy
commented
6 years ago loadable has a Loadable.Capture that can collect the dynamically imported components. then it's a matter of calling the correct meteor methods to include those imports. see discussion here https://github.com/meteor/meteor-feature-requests/issues/151
there's another solution at the end but i didnt figure out how it works and if it's truly ssr.
With the 1.5 Meteor update, we will be able to split code dynamically. We can use react-loadable to load components on-demand.
However, how would we go about sending the needed , dynamically imported components on SSR ?
The server will synchronously import components and render the complete HTML correctly.
Once sent to the client, the javascript will mount, provoking a re-render. Since the client doesn't have the components that were loaded synchronously by the server, it will fall into the "component is not loaded" case and display the loading indicator for the component, after the user has already seen this component properly rendered.
How can we avoid this ? I guess the solution is obviously to simply put the required modules for the page in the head, but how do we go about doing that ?
Do we have a way to serve the compiled modules via webhooks ?
Maybe MDG already though of this, but I couldn't find any information, except this interesting conversation with Ben : https://medium.com/@faceyspacey/u-shouldnt-see-loading-briefly-3289d1b3d4ce
In the meantime, we can probably apply the mecanism from https://github.com/ssrwpo/ssr/issues/47 to solve this issue.
We would basically prevent re-rendering of the component that needs a dynamically imported module until meteor has properly fetched this module.
Also see : https://github.com/thejameskyle/react-loadable/blob/master/README.md#flushserversiderequirepaths--flushwebpackrequireweakids
However, this would need to be implemented by Meteor itself (at least a hook or something) and I have no idea if that is done, or is planned.