Feasibility of micro frontends

[janus-reith]

Im evaluating wether nextjs would be suitable for a microservice approach, where the page is build from multiple separate components that could be deployed separately. I found different concepts that only render serser side static templates or create the content clientside.

I would like to have am isomorphic approach, preferable with nextjs. Did anyone implement such a solution, or what would be your opinion on the technical feasibility?

E.g. the content is build from three separate nextjs apps, each running on their own port or instance. One would serve as the main UI and have a navigation to allow seamless transition between routes.

I also wonder how they could be scoped, although I think styled-jsx would really offer benefits here due to its nature.

I'd also welcome different solutions for this, main requirements would be:

• (isomorphic) React / SSR
• Each part should be deployable separately.
• Content should be composed into one page and not just sit on different routes.

[ScriptedAlchemy]

Ssr needs code to be requirable on disk. So you need a way to share a volume.

I've worked around this with custom webpack targets that let me stream code from s3 or other hosts. It makes chunk loading on node work like it does in the browser

[msreekm]

I recently came across this mono-repo framework has support for next.js, https://nx.dev/react ,it is a different approach from MF.

[ScriptedAlchemy]

Lol spoken to several of these companies who are moving to MF. But yeah that's a classical solution that's well presented and abstracted

[sergioviniciuss]

Hey @ScriptedAlchemy are there any updates on it? 😄 We're facing issues trying to consume a remote component inside a nextjs application using modules federation plugin. We're able to expose components, but consuming it causes issues that, after researching with no success, brought me to this thread (as I started questioning if this is not yet supposed to be possible with nextjs). So I'm considering maybe start using the multi-zones approach to give other teams possibility to have their own "microfrontend" based on pages, and do it routes based while nextjs is not yet fully supporting it, but I'm 100% sure that this is a limitation on nextjs side.

[bryanltobing]

any update on this?. i've seen @module-federation/nextjs-mf. but seems like no one use it base on amount of npm downloads

[ScriptedAlchemy]

It's on a paid registry, the one on NPM is no longer supported.

https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf

I use it in production users have not reported any issues beyond some slight DX improvements like logging during builds

I've also gotten SSR, multi zones / federated pages, translations, environment variables all working. I hold workshops for companies interested in the SSR system and have a reference architecture with 3 independent next apps that uses federated page routing, federated SSR etc

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.