search

FormidableLabs / react-ssr-prepass

A custom partial React SSR renderer for prefetching and suspense
MIT License
592 stars 26 forks source link

Could this help us with lazy load with react.lazy #46

Closed sayjeyhi closed 4 years ago

sayjeyhi commented 4 years ago

Just curious to know, could we use react-ssr-prepass to handle React.lazy imports on SSR?

JoviDeCroock commented 4 years ago

Yes, this library is meant to provide Suspense support on the server, this means that thrown promises like lazy or a data-library supporting suspense will be supported on the server-side render.

kitten commented 4 years ago

Indeed there's some dedicated logic that'll preload React.lazy components :) https://github.com/FormidableLabs/react-ssr-prepass/blob/master/src/render/lazyComponent.js

sayjeyhi commented 4 years ago

@JoviDeCroock thanks, and it how it will deal with lazy loaded component? for example if we are using renderToNodeStream , ssrPrePass will append files in header or how?

kitten commented 4 years ago

No, the loading on the client-side is always separate. All react-ssr-prepass does is be a prepass step that preloads data. In this case it'll simply defer the promise it returns to resolve after the lazy loaded component has loaded.

If you're looking to track what components you need to pass to the frontend you may want to look at projects like loadable-components or react-universal-component to replace React.lazy

sayjeyhi commented 4 years ago

hmm, well, thanks again. actually I am using them I was just wonder if it is possible to replace them with builtin React.lazy and use react-ssr-prepass or not 👍 🌹