Microfrontends React/Component based splitting

Question

Background: I am confronted with the task to modernize a tool and convert it to microservices with a react frontend. My idea was to have a general top-level component containing e.g. the Nav and a component for each microservice that contains the functionality.

Approaches:

• bundle the components locally so that it becomes effectively a monolithic frontend and the the forntend code is seperated just in the repo.

I think that would give up on the advantage of not having to redeploy your entire app for every change

• lazy-load a minified bundle of each of the components from the microservice by defining them in a config file

With this approach I could just webpack each component on their own and async import it from the Main Page but maybe there would be a huge overhead

I read about component based splitting with react-loadable and bundling react-router or webpack, but I can't find information on how to load small bundles form different URL-Endpoints.

Question: Is it possible to bundle react components on their own and import them from different Resource-URL's and how would one approach that ?(Or is React even suitable for that)

Answer 1

So after quite some search and experiments I found the Project Mosaic of Zalando, which is what I wanted. It offers a great way of React Component Splitting to support Micro Frontends. Note however that it is probably not suitable for smaller projects as it takes some time to get into the material and setting up all necessary applications.