Cloudflare's New Vertical Microfrontend Template: Streamlining Path-Based Edge Routing
Cloudflare has recently introduced a groundbreaking Worker template for Vertical Microfrontends (VMFE), revolutionizing the way independent Cloudflare Workers are utilized. This innovative approach maps these Workers to specific URL paths on a single domain, offering a seamless user experience akin to Single-Page Applications (SPAs).
The key innovation lies in the shift from horizontal component mixing to vertical, path-based ownership. With this model, teams can take ownership of specific routes like '/docs', allowing them to manage the entire vertical stack independently. This includes choosing frameworks such as Astro or React and handling the CI/CD pipeline, all without interfering with other teams' responsibilities for routes like '/marketing' or '/dashboard'.
The technical foundation of this architecture is a three-part system. Service Bindings enable direct communication between the Router Worker and sub-application Workers at the edge, minimizing latency by bypassing the public internet. The Router Worker acts as the gateway, directing requests based on path prefixes. Additionally, the HTMLRewriter automatically adjusts HTML responses to correct pathing issues, such as adding '/docs' to image sources, which can be disrupted when services are reverse-proxied.
To enhance the user experience, the template incorporates two modern browser APIs. CSS View Transitions ensure that DOM elements, such as navigation bars, remain visible during page transitions, eliminating the 'white flash' typically associated with Multi-Page Applications. Furthermore, the Speculation Rules API is utilized to prefetch linked microfrontends into memory, significantly improving the speed of switching between physically separate Workers, currently supported only in Chromium-based browsers.
Cloudflare's internal dashboard employs this model to separate core features from products like Zero Trust. Brayden Wilmoth, a full-stack engineer at Cloudflare, highlights the challenges faced by teams as they grow, where different frameworks serve various use cases. Updates from multiple teams can lead to frustrating rollbacks due to regressions introduced by a single team.
This vertical approach mirrors a broader shift in software development. Luca Mezzalira, a principal solutions architect at AWS, emphasizes that micro-frontends should focus on team autonomy and 'flow' rather than code reuse. He argues that an end-to-end vertical slice serves as an ideal 'proving ground', enabling teams to tackle complex tasks like authentication and observability without the challenges of a 'big bang' migration.
While the architecture offers significant organizational advantages, it also presents specific operational trade-offs. A Reddit thread discussion points out a potential issue with the billing model for edge-based routing, where adding a Router Worker results in every static asset request being billed, even though the underlying static asset Workers are free. This conversion of free requests into metered Router requests can be a concern.
Vercel, a company that adopted microfrontends, achieved a 40% reduction in preview build times with their vertical approach in late 2024. However, they also encountered challenges, including the complexity of testing these setups locally and the need for manual workarounds for certain features. The industry remains divided on the concept, with vertical slices being a valuable asset for large enterprises, but smaller teams may find the additional architectural 'tax' unnecessary, especially with fewer than 15 developers.
About the Author:
Steef-Jan Wiggers
