Multiple instances of Microfrontend

Question

I'm curious about something and would like to hear some opinions. Imagine I'm working on a microfrontend architecture using Angular. In this setup, I have a shell and a remote (like a card). Let's say I also have an array of products. Is it considered good practice to show a microfrontend card in the shell for every product in the array (populating the card with the details of the product)? In other words, should I create a separate microfrontend instance for each array element, or should each microfrontend only be instantiated once within the shell project?

Answer 1

It is ok to have an array of same Microfrontend ( card ) inside the shell. It is not going to instantiate from scratch each time. It will download the remoteEntry.js only once and will render multiple dom elements using the same source.

import React from 'react';
import ReactDOM from 'react-dom/client';
// remoteEntry configured in webpack.config.js 
import Header from 'common/Header';  // mfe 1 
import Footer from 'common/Footer';  // mfe 2
import Product from 'core/Product';  // mfe 3 

const App = () => (
 <div>
     <Header />
     <Product details={{ name : 'Product 1' }}/>
     <Product details={{ name : 'Product 2' }}/>
     <Footer />
 </div>
);