nextjs-sidecar example is confusing

Great job on creating Module Federation. No doubt this is an important piece of how things will be done from now on. And quite awesome to see an example for implementation on NextJS. But I have to say the example itself is quite confusing, or at least not explained entirely. Why have a component (src/components/Dog.js) - which lives under NextJS already - treated as a remote component within NextJS. Why this loop into itself? Is this part of how Module Federation works or just to showcase how to consume components from NextJS? Please clarify this bit.

One more thing, even in this simple example the performance is surprisingly bad, is SSR not yet working with Module Federation?

Thanks again!

[ScriptedAlchemy]

Check this repo for a NextJS folder. It’s all in there. SSR works but I did have to bolt on some extra boilerplate because next is missing a async boundary internally.

Working to resolve that with the team.

[ScriptedAlchemy]

The sidecar build is this though.

Making next and non-next work together is pretty much the same process. take a next app as is, with its import mechanism, and start up a different app and import its component / repoint the remote.

if its client-side, window.remoteName.get('./header') will work, assuming the remote is on the page.

SSR works with module federation, its next.js which does not work well with webpacks feature. SSR works on any other ssr example with far less complexity.

I made an example with bi-directional hosts. In reality, ill have apps that are just remotes, like component libraries. Those I import by injecting the script to the page myself, then manually initializing the remote inside a webpack 4 host, if its a webpack 5 host ill just import it as usual.

Webpack 4 cant share automatically, so we recreate some critical dependencies we want to share between WP4 and WP5 - manually.

Something like:

global[scope].init(
    Object.assign(
      {
        react: {
          get: () => Promise.resolve(() => require("react")),
          loaded: true,
        },
      },
      global.__webpack_require__ ? global.__webpack_require__.o : {}
    )
  );

Perf is probably bad because I’ve put nothin in place for SSR script chunks or preloading, so it boots and loads. Havent really looked at the perf, what aspects were bad?