Server-Driven UI
Server-driven UI is a pattern where the server returns a description of screens, components, and actions rather than only raw domain data. Clients interpret the schema to render native or web interfaces, enabling rapid layout changes without app store releases.
Technical Architecture & Deep-Dive
Mobile teams use server-driven UI to ship promotional layouts, onboarding experiments, and form changes from the backend. The payload might be JSON with component types, styles, and binding keys.
A Backend for Frontend layer is ideal: it composes multiple upstream APIs into one server-driven tree tuned for phone width, strips PII, and signs action URLs. That keeps client binaries thin while preserving type checks on allowed component kinds.
Key Architectural Benefits
Implement Server-Driven UI at the Edge
Deploy lightweight API aggregation, edge caching, and secret injection in minutes without Docker containers or complex servers.
Frequently Asked Questions
Q:Is server-driven UI the same as HTML?
Both separate structure from client logic. Server-driven UI usually uses a compact component schema interpreted by native SDKs rather than a full browser DOM.
Related Architecture Concepts
Backend for Frontend (BFF) is an architectural pattern where a dedicated gateway layer is created for a specific frontend client (e.g., iOS, Android, React). Instead of clients calling multiple generic backend APIs, the edge BFF aggregates upstream calls, injects credentials, and strips unneeded payload fields before transmission.
API composition is a pattern where a composer layer calls multiple upstream services, then combines and transforms their results into a single response. It lets clients retrieve data owned by different systems, such as a CRM and a billing provider, through one request.
API versioning is the practice of managing changes to an API so existing clients keep working when the provider introduces breaking changes. Common strategies include version numbers in the URL path, custom headers, and date-based versions like those used by Stripe.
JSON Projection is the declarative extraction, transformation, and renaming of specific nested properties from upstream API payloads into a clean target schema. Executed at the edge without unsafe eval() functions, it delivers lightweight, structured JSON tailored to client UI components.
Ready-to-Use Edge Recipes
To solve how to create mobile friendly api from legacy rest service, never execute unauthenticated requests or embed private tokens directly in client bundles. RealComposer acts as a sub-10ms edge gateway running on Cloudflare Workers that securely injects credentials from your Secret Vault, normalizes responses, and prevents unauthorized API usage. Route calls through your RealComposer edge URL to guarantee complete privacy, robust origin validation, and low mobile latency.
To solve backend for frontend without express or docker, never execute unauthenticated requests or embed private tokens directly in client bundles. RealComposer acts as a sub-10ms edge gateway running on Cloudflare Workers that securely injects credentials from your Secret Vault, normalizes responses, and prevents unauthorized API usage. Route calls through your RealComposer edge URL to guarantee complete privacy, robust origin validation, and low mobile latency.
Linear payloads are heavy for React Native. Pick issue id title state assignee from GraphQL response. RealComposer output mapping returns only the fields your UI needs at the edge.