In short, it's a way to a way to apply the microservice principles to frontend applications, this will give multiple benefits like Autonomous teams, Easier maintenance, independent deployments, and flexible tech choices.
The best use for microfrontend architecture is when you have a large-scale application and a large team working on it and you want to divide to conquer, otherwise adopting microfrontend architecture will be overkill.
The old good iframe tag, you can use anywhere on your page, you need to make sure this header is enabled on the page you want to include as an iframe
X-Frame-Options: ALLOW-FROM https://example.com
You can pass data from the parent page to the iframe in two ways:
- Url params
Feature in Next.js lets you reference another project as a page in the main app using redirects, if you are not using Next.js you can achieve that using Nginx as well.
Since the main app and all the zones are on the same domain, they will share the cookies so you can do authentication on the main app and the other apps can read the auth cookie
4. Module federations
A new feature in webpack 5, allows you to export one of your components and use it in another app and import it like any other component in the app, any update on the federated component will reflect all consumers at runtime
I created a small demo used Zones and Module federations
I this demo there is 2 Zones, Home and Products, and I exported the top menu bar as federated module from Home app and used it in both Home and Products
Also using next-auth library I created a simple auth and since and it's shared between two zones