Next.js: RSC/App Dir

[ScriptedAlchemy]

Knowns:

• RSC is async, providing a free "async boundary" and independent entrypoints.
• React is divided into four distinct singletons:
  • react-dom/server
  • react-dom/server/rsc
  • react
  • react/rsc
• Crossing a server-client boundary involves:
  • Switching from "use client" to "full react"
  • RSC employs a module proxy to export metadata for isolated execution
  • The proxy returns a serialized render tree

Known Issues:

• React must be externalized due to some of Next.js being outside the webpack scope, leading to version conflicts.
• Four instances of React are present:
  • Normal Use Client
  • Server Components Subset
  • Browser/Server
• Loader layers were unsupported in previous versions, but references in webpack source indicate potential changes. Webpack Layers
• Forking React Flight plugin is complicated due to an existing internal fork in Next.js. ReactFlightWebpackPlugin

Perspective:

• RSC has not yet proven business value, giving it low priority.
• Next.js makes initial support exceptionally hard.
• Easier wins, in time, will produce higher gains.

Ideas:

• Consider an RSC-only mode that works exclusively with app directories.
• Fork or patch the React Flight plugin, acknowledging Next.js complexities.
• Investigate RSC's file path registration for either entrypoint loading or module ID.
• Explore dependency sharing via a custom chunk loading handler.
• Evaluate starting main entry points using remote.
• Leverage Zephyr Cloud's build-time capabilities.
• Fork Module Federation feat(enhanced): Fork Module Federation #1224
• Use fork to implement async boundary in the entrypoints runtime startup code feat: NextJS - improve async startup #1433
• Rewrite node federation, start unification process between module-federation and ByteDance feat: Unify Federation with ModernJS & Byte Infra team #1268

Reality:

• Next.js isn't built for this architecture, primarily due to async issues.
• The plugin is "fighting the framework," making it a tough battle.
• Next 13.5 introduces package import optimization, which may interfere with module sharing.
• Theres significant progress by osmosis, for example feat: NextJS - improve async startup #1433 which is largely a side effect of improvements designed for the larger ecosystem. So in time itll likely work itself down to a lower cost / time to support.

---

Want to help?

Any progress is welcomed!

Where to start

• This branch https://github.com/module-federation/universe/tree/1400-nextjs-rscapp-dir can be forked and used as a stash point for any progress.
• [] update example apps to reflect the problem, by using AppDir on one of them
• [] exposed modules need to support webpack layers, like entrypoints and loaders do
• [] share scope needs to share all the new packages, like react/navigation and so on, one may want to experiment with two shareScope keys, like default and rsc, so RSC parts are shared via the right library and not use client react
• [] check and see what build name comes up, rsc likely is another webpack compile, if so that would be helpful to identify if any build info on the compiler lets us know what to do

[duannx]

@ScriptedAlchemy Does that mean MF already supported App Router with these known issues? Or do we need to fix these issues first to make MF work with App Router?

[ScriptedAlchemy]

@ScriptedAlchemy Does that mean MF already supported App Router with these known issues? Or do we need to fix these issues first to make MF work with App Router?

Need to fix. Soon as you add it. I believe it starts crashing. Likely due to react is "two" copies now. The full set and a subset depending on who imports it not how it's imported.

[ScriptedAlchemy]

Okay it looks like #1433 - using the forked version of module federation, i can enable it to track initialChunks as well, then wrap entrypoint runtime callback in the chunk handlers federation normally uses, causing a eager entry to await its own startup while federation checks its chunkid againt its now "all knowing" chunk maps.

[alimsadeghi1]

Hello,
I would like to kindly bring attention to this issue and request that it be prioritized as high. This issue is causing a significant impact on our project workflow, and resolving it quickly would greatly benefit our team. Thank you for your understanding and assistance in this matter.

[ScriptedAlchemy]

Hello,

I would like to kindly bring attention to this issue and request that it be prioritized as high. This issue is causing a significant impact on our project workflow, and resolving it quickly would greatly benefit our team. Thank you for your understanding and assistance in this matter.

Best way to move it forwards is looking over "how to help"

Given current bandwidth and demand. I'll likely only start looking at it in a few months. Community is welcome to help, which will speed up the timeline significantly

[github-actions]

Stale issue message

[ScriptedAlchemy]

#2002