server-side-rendering examples do not seem to work out-of-the-box

[DevLab2425]

On a fresh clone of this repo, and a build and serve of the /server-side-rendering example, the app launches properly, however, the initial HTML does not include any content outside of the Host files. This does not seem to be expected for a true SSR experience which should contain a full HTML page worth of markup. In this example, this is not the case.

Additionally, the /server-side-render-only example, which does render the HTML on the first load, has an interesting configuration for the Host that seems to contradict the "over the wire" nature of MF. As Seen here in the Host webpack.config.js, it uses a relative path for the remote path. I would expect that all Remotes be absolute URLs to another server. Was the relative path intended or required for SSR in this use case?

One last item, I've noticed that in each of these examples they include self-contained servers for each of the Host/Remote combos with dedicated Webpack config files. Is a server Webpack build a requirement for SSR MF? Could the Remote client files theoretically be built and hosted via S3 (or similar) without requiring a separate Webpack build for a dedicated file server?

---

Between these two SSR examples, neither one is fully functioning as would be expected for SSR. Can someone help me determine what the ideal settings would be for a SSR MF implementation using React 18? Ideally, it would be compatible with an architecture consisting of a NextJS Host with n# Remotes running either a custom ExpressJS app or another NextJS application.

Thanks in advance and please let me know what else I can do to assist here.

---

Screenshots

Rendered UI with Remote components

Page Source missing Remote HTML

[ScriptedAlchemy]

these SSR apps are older, my basic examples dont showcase a robust server & client example - but its absolutely possible and we have implemented it for others.

You can use both next and vanillia ssr apps without much issue as we have done in the past, but I dont have a good foundation SSR application to demo module federation over - mostly i either show it working on server in node, or in client, next just does both because its configuring the various parts.

So while possible, my ssr demos that are not next based likely are too simple and need to be revised

@brunos3d might have a proper ssr example

[brunos3d]

@ScriptedAlchemy @DevLab2425 We have a more up-to-date SSR sample with React here
https://github.com/module-federation/module-federation-examples/tree/master/react-18-ssr

[wibed]

the example provided seems to have some issue.
ootb i get the following error:

ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:3001/client/remoteEntry.js)
while loading "./Content" from 9223

Note: Error in firefox.
on chrome in works fine

#307

[apadiyar-chwy]

@ScriptedAlchemy @brunos3d
tried the examples in folder, but i am seeing issue with SSR version
checked next js version as it was recommended earlier in this thread.

When i make change to remote app's component and restart remote app,
in initial server response on host app, remote component's html code still reflects the old code.
hydrate actually updates the html on browser

Is it possible to make initial server response on host app reflect remote component's change ?