Micro-frontends have become a popular architectural pattern for building scalable, modular web applications. Traditionally, implementing server-side rendered (SSR) micro-frontends has been considered complex. However, Astro’s Server Islands offers a streamlined solution for composing distributed, SSR micro-frontends. This article explores how developers can leverage Astro’s unique features to simplify the process of building and integrating micro-frontends into a shell application.
What Are Micro-Frontends?
Micro-frontends are an extension of the microservices concept applied to the front-end. They involve splitting a web application into smaller, independent units (micro-frontends) that can be developed, deployed, and maintained separately. These units are then composed into a single cohesive application, often referred to as the “shell.”
Astro’s Server Islands architecture provides an efficient way to render these micro-frontends server-side while ensuring seamless integration within the shell application.
Server-Side Rendering for Micro-Frontends
Each micro-frontend in this approach is essentially an Astro application that handles its own server-side rendering. These applications return HTML, CSS, and optional JavaScript, making them lightweight and easy to integrate.
Here’s an example of how a server-side rendered micro-frontend might look:
import ClientComponent from "../components/ClientComponent";
import style from "./_index.module.css";
---
<section>
<h2 class={style.heading}>Microfrontend</h2>
<ClientComponent client:only="react" />
</section>
This setup allows each micro-frontend to function independently while adhering to the principles of modularity and scalability.
Composing Micro-Frontends in the Shell Application
The composition of micro-frontends is handled by a shell application, which in this case is also built using Astro. The shell fetches the output of individual micro-frontends and integrates them seamlessly using Astro’s Fragment component.
Here’s how server-side composition works:
const microfrontend = await fetch("http://localhost:7100")
.then(response => response.text());
---
<Fragment set:html={microfrontend} />
This approach allows developers to fetch and render micro-frontends dynamically, ensuring flexibility in how components are loaded and displayed.
Rendering as Server Islands
Astro’s Server Islands architecture enables non-blocking rendering of components, which are loaded on demand. This ensures that users experience faster load times while components fetch data or complete other tasks in the background.
Below is an example of rendering a micro-frontend as a Server Island:
import Microfrontend from "../components/Microfrontend.astro";
import Loader from "../components/Loader.astro";
---
<html>
<head>...</head>
<body>
<h1>Title</h1>
<Microfrontend server:defer>
<Loader slot="fallback" />
</Microfrontend>
</body>
</html>
The Loader component acts as a fallback while the micro-frontend is being fetched, providing users with a smooth experience even during loading times.
Sharing Dependencies Across Applications
One of the challenges in building micro-frontends is managing shared dependencies across different units. Astro simplifies this by allowing developers to use an importmap to share dependencies like React and ReactDOM across multiple applications. These dependencies can be fetched from a CDN such as esm.sh.
Here’s an example:
xml<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@19",
"react-dom": "https://esm.sh/react-dom@19",
"react-dom/client": "https://esm.sh/react-dom@19/client"
}
}
</script>
During build time, these dependencies are marked as externals and cached in the browser after the first page load. This reduces redundancy and improves performance across applications.
Benefits of Using Astro for Micro-Frontends
Astro’s Server Islands architecture offers several advantages when building micro-frontends:
- Modularity: Each micro-frontend operates independently, promoting better scalability and maintainability.
- Performance: Non-blocking rendering ensures faster load times and improved user experience.
- Flexibility: Developers can use any framework or library within their micro-frontends while maintaining seamless integration.
- Ease of Composition: The
Fragmentcomponent simplifies server-side composition, making it easier to integrate multiple units into a single shell application. - Shared Dependencies: Import maps streamline dependency management across different applications.
Conclusion
Building server-side rendered micro-frontends doesn’t have to be complicated. With Astro’s Server Islands architecture, developers can create distributed, modular front-end solutions that are easy to compose and maintain. The combination of server-side rendering, dynamic composition, and non-blocking components makes Astro an excellent choice for implementing modern micro-frontend architectures.
While this article focuses on using Astro as the meta-framework for building micro-frontends, other SSR frameworks like Vite could also be used depending on project requirements. Interested in exploring this further? Check out an example implementation on GitHub where each micro-frontend fetches data from external APIs.
By adopting tools like Astro, teams can simplify their workflow while delivering scalable, high-performance applications tailored to meet modern development needs.
Read more such articles from our Newsletter here.
