No longer "A solution recommended by React Team"?

[adbutterfield]

🐛 Bug Report

Not really a bug per say, but it looks like with React 18, this is no longer "A solution recommended by React Team"

I'll still have to use this for a while though, I don't think we can drop IE11 support yet where I work.

[chrischen]

https://github.com/reactwg/react-18/discussions/37

So React.lazy and Suspense will just work for SSR and bundle splitting now?

[adbutterfield]

Haven't tried it yet myself, but according to the docs, seems like.

[chrischen]

I just looked at the SSR example given and it's not any more "just works" than loadable-components. Still need to wire up the initial chunks (via the new renderToPipeableStream), wire up the asset manifest from webpack, and inject static CSS if you use that. The wiring is also a bit different. Also doesn't work with renderToString (for SSR purposes at least).

However the demo does indeed render the React.lazy + <Suspense> component children on the server, but if you fetch data remotely inside a Suspense boundary ~~it still gets punted to the client to load~~ it gets server rendered and streamed to the client and displayed before the JS bundle is loaded.

[adbutterfield]

I guess my main point is mention of loadable-components has been stripped from the React docs. (Regardless of whether what we get in v18 really does the same thing as loadable-components or not)

[theKashey]

Sounds like it. React 18 can handle code splitting out of the box, keeping Suspense boundaries not hydrated while styles are in flight. To some intent - https://github.com/facebook/react/issues/22692

To support static CSS and optimise loading times one still need library like this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.