Micro Frontends, Server Components and how these technologies can provide a paradigm shift with architectural changes in modern enterprise web app development

In the realm of modern web application development, the microservices architecture has significantly transformed back-end systems, offering scalability and maintainability. Correspondingly, the emergence of micro-frontends extends this paradigm to the front-end, catering to the demands of enterprise-scale applications striving for seamless User Experience (UX) while handling extensive data. React, a prominent JavaScript framework, introduces server-side rendering (SSR) and, more recently, React server components (RSC), combining server-centric approaches with client-centric interactivity. The thesis conducts a thorough review of the current state of literature of Micro Frontend Architecture and React Server Components, aiming to integrate these technologies into an already-deployed enterprise web application. The purpose is to provide valuable insights offering guidance for efficient and effective implementation in large-scale web applications.. The study begins from a comprehensive analysis of Micro Frontend architectural patterns the work focused on the study of the concept of Module Federation. Module Federation is a key requirement for adopting Micro-Frontends, as it allows for seamless integration and communication between different micro-frontends. To implement Module Federation, the adoption of Vite.js and Webpack is necessary. These tools provide the infrastructure and configuration to enable module sharing and dynamic micro-frontend loading. Additionally, the thesis delves into the complexities of utilizing React Server Components without native framework support, emphasizing the importance of frameworks like Next.js, Remix.run, or Modern.js, which offer built-in mechanisms such as Server Side Rendering. The usage of Micro Frontend emerged as a useful solution for a gradual adoption of server rendering practices, modularizing the application without the need for a complete rewrite and reducing challenges and risks associated with a full-scale implementation. The thesis illustrates a demo application implementing Micro Frontend Architecture showing the most used patterns involving the usage of Vite bundler and its module federation plugin, exposing and sharing components between React micro-apps. Considerations for styling using libraries like Carbon and Tailwind, as well as state management with tools like Recoil, are discussed. Furthermore the demo shows how to integrate server rendered components using the Remix framework.