Microfrontends with Vercel

I’ve been witnessing the impact (and complexity!) of Microfrontends for a while now and I’ve recommended them as an effective solution for splitting large front-end applications. So, I was pretty excited to read that Vercel is building native support for microfrontends. It’s currently in Limited Beta and is only available on Enterprise plans, but let’s take a closer look at their approach.

Why is Vercel interested in Microfrontends?

Microfrontends are recommended when:

• You want to split a large frontend application into smaller manageable chunks. This will also help you improve local and production build times.
• You want to reduce cross-teams dependencies with each team owning their tech stack and deciding their release cycle.
• You want to isolate new features or provide a way to modernize parts of an application incrementally.

Vercel is positioning itself as the end-to-end Frontend Platform so it is not too surprising that they are integrating the Microfrontends pattern capability into their current offering.

As they use Microfrontends themselves, it is likely that they developed their Microfrontends capability based on their own experience, steadily making it more abstract and reusable.

What makes Vercel approach to Microfrontends interesting?

Vertical Split

Mimicking their own adoption of Microfrontends, Vercel’s Microfrontends capability is based on an application Vertical Split where requests to a website are routed to different applications based on route paths. For example:

• https://website.com/home
• https://website.com/blog

Monorepo first

I really like that they are breaking the codes of Microfrontends a little bit by promoting a monorepo-first approach with their Microfrontends capability. They are even integrating it natively with their Turborepo, their monorepo build system.

What really stands out about the Vercel approach to microfrontends is the attention to developer experience, with a well-documented, end-to-end solution for running your microfrontends setup locally. With the Vercel setup, you can run either all or only a subset of your microfrontends locally, with the rest using their production endpoint as a fallback mechanism. This smart approach helps developers run in a production-like environment while keeping complexity localized.

Incremental Adoption

Another notable design choice is the built-in approach to incrementally adopting Microfrontends in your setup. I think this stems from their own adoption process and is an excellent way for organizations to safely and iteratively adopt such advanced patterns.

Vercel makes it easy to add a new microfrontend based on a new path or, even better, to route a specific request to a new microfrontend based on a feature flag.

Final thoughts

As it stands, there is still a lot of configuration required to ship microfrontends on Vercel, but I am sure that, over time, they will be able to simplify the initial setup process.

Even if it’s still in Beta, I really like Vercel’s approach to Microfrontends which looks to have been built following their own adoption and it looks like a robust way to scale frontend applications. This is product development done right!