Building vertical microfrontends on Cloudflare’s platform (opens in new tab)
Cloudflare’s new Vertical Microfrontends (VMFE) Worker template lets independent teams map separate Workers to different URL paths on one domain. Unlike horizontal microfrontends, each team owns an entire vertical slice—including its framework, frontend, deployment pipeline, and operations. The approach enables technology flexibility and team autonomy while using view transitions and preloading to preserve a seamless user experience. ## Vertical Microfrontend Architecture - Applications are divided by URL path rather than by components on a single page: - `/` → Marketing - `/docs` → Documentation - `/blog` → Blog - `/dash` → Dashboard - Routes can be split into more granular verticals, such as: - `/dash/product-a` → Worker A - `/dash/product-b` → Worker B - Each route can be an entirely separate frontend project with its own: - Framework and libraries - Codebase - CI/CD pipeline - Owning team - This allows teams to choose technologies suited to their needs—for example, Astro for marketing and React for a dashboard. - It also reduces the risk of monolithic releases, where one team’s regression can force multiple teams to roll back. - Cloudflare applies a similar model internally, routing users from its core dashboard to separate products such as Zero Trust based on URL paths. ## Creating a Unified Experience - Independent applications must still appear cohesive to users. - Users generally accept distinct experiences between marketing, documentation, and dashboards. - However, related areas within one product—such as `/dash/product-a` and `/dash/product-b`—should not expose their separate repositories or Workers. - The goal is to hide implementation boundaries while preserving independent ownership. ## CSS View Transitions - Navigating between separately deployed Workers can otherwise produce a brief blank screen while the next document loads. - CSS View Transitions can preserve shared elements, such as navigation, during page changes. - The transition API allows teams to: - Keep DOM elements visible across navigations - Animate differences between the old and new pages - Make multi-page applications feel more like a single-page application - A small CSS rule can assign a transition name to the navigation and apply an eased animation to the page transition. ## Document Preloading - Seamless animation is not enough; navigation should also feel immediate. - The Speculation Rules API lets compatible browsers prefetch likely future document navigations. - Teams can define a `script` with `type="speculationrules"` and list URLs for related vertical slices, such as links in shared navigation. - Chrome, Edge, and Opera support the newer API, while Firefox and Safari currently do not. Cloudflare’s VMFE approach is most useful when teams need independent ownership and technology choices without sacrificing a unified product experience. Path-based Worker routing, shared visual conventions, view transitions, and selective prefetching provide the foundation for making separate applications behave like one.