View Composition

Each UI fragment is self-contained, owning its own data retrieval, rendering logic, and styling. Fragments are developed, deployed, and scaled independently by separate teams without coordination. This enforces bounded contexts at the presentation layer.

• Fragments fetch their own data from dedicated backend services
• Each fragment can use its own technology stack (React, Vue, Svelte)
• Failures in one fragment do not crash the entire page
• Independent caching strategies per fragment based on data volatility

The final HTML document is constructed on the server or at the CDN edge before reaching the browser. This avoids the waterfall of client-side requests typical of micro-frontend architectures and ensures fast First Contentful Paint (FCP).

• Assembly occurs at request time, not build time
• Enables dynamic composition based on user context or A/B test assignments
• Reduces client-side JavaScript overhead and layout shift
• Compatible with Edge-Side Includes (ESI) and streaming responses

Fragments are pulled into a parent template using transclusion—a mechanism where a placeholder in the layout is replaced with the rendered output of a remote fragment service. This can be synchronous or asynchronous.

• ESI tags instruct edge servers to fetch and embed fragments
• Server-side includes merge fragments during SSR
• Tailored transclusion passes request headers (cookies, geolocation) to fragment endpoints
• Timeouts and circuit breakers prevent slow fragments from blocking the full page

While fragments are independent, they often share a global page state for consistency. A composition layer manages shared context—such as user identity, cart contents, or feature flags—and injects it into each fragment's rendering context.

• Shared state is passed as props or via a server-side context object
• Avoids duplicate data fetching across fragments
• Enables coordinated interactions (e.g., adding an item to cart updates the header fragment)
• State hydration ensures client-side interactivity aligns with server-rendered markup

View Composition enables granular caching where each fragment has its own Time-to-Live (TTL) based on content volatility. A product description fragment may cache for hours, while a personalized greeting fragment is never cached.

• Surrogate keys allow targeted cache invalidation per fragment
• Stale-while-revalidate patterns serve cached content while refreshing in the background
• Cache headers are set by the fragment service, not the assembly layer
• Dramatically reduces origin server load for high-traffic pages

If a fragment service fails or times out, the composition layer serves a fallback rather than breaking the entire page. This ensures partial availability and a functional user experience even during partial outages.

• Static fallback HTML is served when a fragment endpoint is unreachable
• Timeout budgets prevent slow fragments from delaying the full page response
• Health checks at the assembly layer route around unhealthy fragment instances
• Degraded pages still render navigation, footer, and critical content

An architectural approach where multiple specialized content services and APIs are interconnected to form a unified, graph-based content layer. Unlike monolithic CMS platforms, a content mesh aggregates structured content from disparate sources—headless CMS, databases, and third-party APIs—into a single queryable graph that feeds View Composition logic.

• Unified querying: Often uses GraphQL to stitch data from multiple back-ends
• Decoupling: Separates content storage from presentation logic entirely
• Role in composition: Provides the data layer that view templates pull from during assembly

A programming model where the user interface is described as a pure function of application state. Frameworks like React, SwiftUI, and Jetpack Compose handle the imperative DOM updates automatically. This paradigm is foundational to View Composition because it allows fragments to be expressed as deterministic outputs of their data inputs, making assembly predictable.

• State-driven: UI = f(state) — the view is a projection of the current state
• Reconciliation: The framework diffs a virtual representation to compute minimal DOM mutations
• Composability: Declarative components are inherently composable, enabling nested fragment assembly