Discussion on "Micro-frontends with Next.js and Module Federation"

Alibek Kazhibekov · 2023-04-16T22:06:10.680Z

Imagine a typical e-commerce app with a header containing a menu, search bar, user account, and cart, as well as various pages such as the home page, product description page, and checkout page. These pages and components are typically developed by d...

I read it well, but the link between Next.js and Module Federation you're talking about has so much to lose compared to what you get.

You need to import the components of the remoteApp as a dynamic import (ssr false). The reason is that if you do static or dynamic import (ssr true), you will get a hydration error. You will use the entry.js of the remoteApp that was built at the time of the build on the server, but what if the remoteApp screen was modified in the meantime? You will see a 100% hydration error.
Dynamic import (ssr false) fails to render your components on the server, which eventually tarnishes one of Next.js' main objectives of optimizing SEO. It can also cause pages to appear slightly late, page layout to appear slightly broken, blinking, or shaking. Wouldn't it be better to split into monorepo and float servers in multiple locations and redirect different services??
Every time a remote app page is added, you have to keep adding and sync pages with shell, so what's the point of doing this hassle at the expense of the aforementioned?

Great article. How can you import the hooks from another remote? It would fail if It is dynamic

Hi Alibek,

Have you tried using NextJs SSG (Static site generation). we are able to create a next app with SSG and it was running fine with production build (ex: out folder). however when we try to load static remote page (remoteEntry.js) in host application. getStaticProps are not being called.

What we are trying to achieve is to create a next page with SSG and deploy the production build in any S3 bucket (no runtime/ serveless), refer remoteEntry.js in host application

If you any insights on this please help

The NextJS component level is necessary. how to write an SSR method. Is there another most recent bundle available?

How can I expose a component which needs to do an API call to full fill that component? And when I'm using that component in another repo it should be rendered on the server side.

And tell me is there any way to do a serverside call in the next js component level not in the page level?

What you want it is the new feature of Next.js called App Router, which is not supported by Module federation.

Here you can find how to fetch data on server-side directly in React components nextjs.org/docs/app/building-your-application/dat…

Alibek Kazhibekov For example, in the page router, we have a banner component, to show a banner image we need to do an API call to fetch the image. And I want a reusable component that I can expose and use in another repository and I want all this to happen from the server side. And How to call the SSR method inside the component.

I'm facing one issue with Module Federation For NextJs with Tailwind CSS. How to config tailwind css in the NextJS remote app and host app? Or How to get the tailwind CSS code for the remote app to host app and assets images?

I recommend you to read this article if you already haven't.

malcolmkee.com/blog/using-tailwindcss-with-module…

It is not nextjs, but similar approach should work in your case.

Search Hashnode

Micro-frontends with Next.js and Module Federation

Responses(6)