Decentral Microfrontend support

[sesigl]

Decentral Microfrontend support

Is your feature request related to a problem? Please describe.

There is a need for a scalable architecture that covers backend and Frontend nicely. What I see in practice is usually a well crafted backend architecture and some frontend framework wired around. Nextjs trys to tackle this, but a decentral scaleable approach is missing, technically and strategy/team-wise.

Describe the solution you'd like

If ssr is no requirement, using webpack 5s module federation solves it in a flexible way. You can share common dependencies if possible but also just render applications independently by exposing simple methods that uses React.renderToNode method. Communication needs to be defined using existing web standards.

Backend can be different. They can be monolithic, or Microservice based. Still, the basic architecture should allow to opt-in for server side rendering.

The bigger components should be exposed by module federation and in my opinion should also expose an endpoint that exposes rendered html that can be consumed.

Example:
There are 2 Nextjs applications, 1 that serves a header and a second one that shows some products that consumed the header.

1. The product list application receives a http request
2. It calls the header backend to receive the server side rendered html
3. It renders itself server side and also includes the server side html from the header
4. Response is sent to the client
5. It hydrates itself in the frontend
6. It asks the header module that is fetched by module federation to hydrate itself

I know there is a selling point of module federation about it works in the Frontend and the backend. From an isolation and scaling perspective this won't work. Applications/teams should care about themself how they server side render, what network constraints exist, what is cached and so on. And consumers are only interested in showing this Blackbox. So Module federation on the server does cause more pain than it helps.

So every application that is at the same time a remote component should:

• expose a few methods to render and hydrate via module federation
• expose an endpoint that give you server side rendered html
• maybe an manifest about additional resources

This would teams allow:

• to build applications independently
• release independently
• run resilient and performance systems by leveraging edge side includes
• be framework agnostic, the renderToNode, hydrateToNode exposed method and the exposed http endpoint gives you server side html does not need to be react. Actually, it can be everything that connects to the exposed js methods

Describe alternatives you've considered

Instead of module federation, jsonp or similar things can do the job as well. But module federation is pretty easy to setup and works nicely in the Frontend.

Additional context

I don't know what Nextjs wants to be. But I think there is a big chance to change how teams and applications can scale. There are nice designed backends with scalability in mind (tech + people), but I see just to often some react/Nextjs application, badly supported by the backend, that causes on the long run a lot of trouble. There are centralized approaches like project mosaic from zalando that have some orchestration in the middle. I think for the described approach the most important thing is:

• it's decentralized, each team can use 3 key concepts, or even only use module federation of SSR is not importsnt
• it's simple, SSR still causes some complexity because react was not build for it initially , but that's where Nextjs shines
• it's just Javascript, we use the tools we have nowadays and have a lot of flexibility. If teams want to use web components for better islotation, no problem.
• no dependencies between teams. If a central component teams breaks it's component then there are a lot of options to choose. You could fallback to the previous working, you can use cached, you can define fallback, add retry..... All these things that are standard in the backend but rarely reality in the Frontend.

This is not a solution for a 10 people team. It gets interesting of you scale, if you have 5 or 10 teams with more than 3 devs per team that want to ship fast.

I am interested in your thoughts and if you think we could build.something like this with Nextjs. I have build a react based prototype with working SSR that shows this in action. I think it could be integrated in next js.