Vad är Backend-for-Frontend-mönstret och hur förhåller det sig till en API-gateway?

Question

Accepted Answer

**Backend-for-Frontend (BFF)** är en dedikerad gateway per klienttyp (webb, mobil, partner). Istället för en generisk gateway som betjänar alla klienter får varje frontend en backend anpassad efter dess behov.

## Problemet det löser

En mobilapp och en webbapp har olika behov för data, nyttolaststorlek och kommunikationsfrekvens. En enskild generisk API tvingar till kompromisser och överföring av data.

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

## Vad en BFF gör

- **Aggregerar** flera serviceanrop till ett klientritat svar.
- **Trimmar** nyttoaster för begränsade klienter (mobil).
- Äger **klientspecifik logik** så att tjänster förblir generiska.

```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 kontra gateway

| | API-gateway | BFF |
|---|---|---|
| Omfång | En för alla klienter | En per klienttyp |
| Logik | Generisk tvärgående | Klientspecifik formatering |

## Fälla

För många BFF:er duplikerar logik; håll dem tunna och undvik att läcka affärsregler som hör till tjänsterna.

## Varför det är viktigt

BFF:er låter varje frontend utvecklas i sin egen takt med en backend som passar den, istället för att böja varje klient till ett delat kontrakt.

De kompletterar (ersätter inte) gatewayen: gatewayen hanterar perifera problem som autentisering och routning, medan BFF hanterar klientspecifik aggregering.

	API-gateway	BFF
Omfång	En för alla klienter	En per klienttyp
Logik	Generisk tvärgående	Klientspecifik formatering