SSR with React 18 vs loadable components

[botoxparty]

Hey,

Is it possible now with React 18 to not use loadable components since Suspense is supported in SSR?

Also I can't seem to get the SSR example to run, there seems to be a lot of dependency issues.

Cheers

[ScriptedAlchemy]

Yeah it should be.

The SSR example (non-next) is pretty old and ill likely remove or rebuild it at some point, along with a new ssr plugin for webpack.

You can try impementing node-mf yourself in another SSR app

[botoxparty]

Cool I’ll give it a go, might see a PR for a new example if things go well 😇

[ScriptedAlchemy]

That would help. If there’s a solid example, I’d probably be able to write a new node stream plugin for better SSR support. Currently that’s the tech powering my next js SSR stuff. I just need to backport some internals & have a useful sample app to work off that’s not a hassle to build out to actually R&D on

[botoxparty]

So i modified the existing server-side-rendering example to remove loadable components and only use React Suspense. This seems to work fine however the first time you load the SSR page the fallback is still rendered. When you refresh then the federated modules HTML is rendered correctly.

Any idea why this is happening? Is there a way to make it wait for the federated module to load?

See: https://github.com/botoxparty/ssr-module-federation

[botoxparty]

From what I can tell, node-mf is used to fetch the remotes using http rather than the filesystem. Which I think is a different piece of the puzzle than what I'm looking at.

[ScriptedAlchemy]

Be sure to wrap each component separate in suspense. And be sure you are using async rendering not the old sync render

[ScriptedAlchemy]

Youre still using render to string. Thats not async thus skips unresolved components.

[botoxparty]

I had tested it with the renderToPipeableStream function however still got the same results:

• SSR shows fallback on first load
• All other page loads return full HTML

Here's the latest commit that uses the new renderToPipeableStream API:

botoxparty/ssr-module-federation@a2404cb

[botoxparty]

Oh nevermind, i was using the onShellReady callback when I should have been using onAllReady.

I'll keep testing the application and make a PR soon to the examples repo.

[ScriptedAlchemy]

Awesome work. Feel free to delete and replace an existing SSR example.