Backend for Frontend (BFF)
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.
Technical Architecture & Deep-Dive
The Backend for Frontend (BFF) pattern was popularized by SoundCloud and Sam Newman to solve the friction between frontend requirements and monolithic or microservice API outputs. Modern mobile apps and web frontends require distinct response shapes, authentication methods, and payload constraints.
Without a BFF, frontends must either make multiple sequential upstream HTTP requests (causing slow page loads and battery drain) or backends must expose bloated, generic endpoints that overfetch data. Running a BFF directly on globally distributed edge networks (like Cloudflare Workers) delivers the benefits of API aggregation and payload slimming with sub-10ms latency and zero server maintenance.
Key Architectural Benefits
Edge BFF Pipeline Pattern
// Edge BFF consolidating User Profile + Billing Status in parallel
const [userProfile, billing] = await Promise.all([
fetch('https://api.internal.com/users/99', { headers: { Authorization: `Bearer ${SECRET_KEY}` } }),
fetch('https://api.stripe.com/v1/customers/cus_99', { headers: { Authorization: `Bearer ${STRIPE_KEY}` } })
]);
// Return tailored, slimmed JSON exclusively for mobile client
return Response.json({
id: userProfile.id,
name: userProfile.displayName,
plan: billing.subscriptions.data[0].plan.id,
status: billing.subscriptions.data[0].status
});Build an Edge BFF in 2 Minutes
Compose upstream APIs, inject secrets safely, and deploy a global BFF endpoint with zero Docker containers.
Frequently Asked Questions
Q:What is the main difference between a BFF and a standard API Gateway?
A general API Gateway serves all clients with common routing, rate limiting, and authentication. A BFF (Backend for Frontend) is tightly coupled to a specific user experience (e.g., iOS mobile app vs. desktop web), shaping and aggregating data tailored strictly to that interface.
Q:Why run a BFF at the edge instead of in Node.js or Express?
Running a BFF at the edge (on Cloudflare Workers V8 isolates) eliminates cold starts, removes Docker server management, and places the API aggregation layer within 10ms of global end users.
Q:Can a BFF handle parallel upstream requests?
Yes. Upstream fan-out allows the edge BFF to execute multiple HTTP subrequests concurrently via Promise.all, reducing overall latency to the duration of the slowest single upstream call.
Related Architecture Concepts
API Aggregation is the process of combining multiple distinct API calls into a single unified HTTP request. An intermediate edge gateway queries multiple upstream services in parallel, merges the returned data, and delivers a consolidated response to the client, drastically reducing mobile latency and network overhead.
Payload Slimming is the technique of stripping unneeded properties, internal metadata, and verbose JSON fields from API responses at the edge before sending them to the client. This reduces response size by 80% to 95%, cutting mobile bandwidth usage, memory overhead, and JSON parsing time.
Upstream Fan-out is an execution strategy where an edge gateway dispatches multiple HTTP subrequests to separate origin services concurrently rather than sequentially. The total latency is bound by the single slowest subrequest (max time) rather than the cumulative sum of all subrequests.
Edge Caching is the practice of storing computed API responses on globally distributed Point of Presence (PoP) servers situated geographically close to users. By serving cached responses directly from edge memory, requests achieve sub-10ms latencies while offloading 95%+ of traffic from origin databases.
Ready-to-Use Edge Recipes
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.
Instead of having your frontend make 2 separate requests over high-latency cellular networks, RealComposer fetches your Supabase user record and Stripe subscription details concurrently using Promise.all on Cloudflare Workers, returning a unified JSON payload in a single round-trip.