What is the Backend-for-Frontend pattern and how does it relate to an API gateway?

Question

Accepted Answer

A **Backend-for-Frontend (BFF)** is a dedicated gateway per client type (web, mobile, partner). Instead of one generic gateway serving all clients, each frontend gets a backend tailored to its needs.

## The problem it solves

A mobile app and a web app have different data, payload-size, and chattiness needs. A single generic API forces compromises and over-fetching.

```text
Without BFF:        With BFF:
  All clients          Web ─▶ Web BFF ─┐
     │                 Mobile ─▶ Mobile BFF ─┼─▶ microservices
  one generic API      Partner ─▶ Partner BFF ─┘
```

## What a BFF does

- **Aggregates** several service calls into one client-shaped response.
- **Trims** payloads for constrained clients (mobile).
- Owns **client-specific logic** so services stay generic.

```js
// Mobile BFF: one call → compose a lean screen payload
app.get('/home', async (req) => {
  const [user, orders] = await Promise.all([
    usersApi.get(req.userId),
    ordersApi.recent(req.userId, { limit: 3 }) // small for mobile
  ]);
  return { name: user.name, recentOrders: orders }; // tailored shape
});
```

## BFF vs gateway

| | API Gateway | BFF |
|---|---|---|
| Scope | One for all clients | One per client type |
| Logic | Generic cross-cutting | Client-specific shaping |

## Pitfall

Too many BFFs duplicate logic; keep them thin and avoid leaking business rules that belong in services.

## Why it matters

BFFs let each frontend evolve at its own pace with a backend that fits it, instead of bending every client to one shared contract.

They complement (not replace) the gateway: the gateway handles edge concerns like auth and routing, while the BFF handles client-specific aggregation.

	API Gateway	BFF
Scope	One for all clients	One per client type
Logic	Generic cross-cutting	Client-specific shaping