CodePark/ questions / Client–server contract
START PRACTICINGPRACTICE
Frontend question · Frontend system design › Client–server contract

What is the Backend-for-Frontend (BFF) pattern, and what problems does it solve for a frontend team?

Browser ──► Web BFF ──┬─► Users service
                      ├─► Catalog service
Mobile ──► Mobile BFF ┴─► Orders service

A BFF (Backend-for-Frontend) is a thin server layer that the frontend team owns. It sits between one type of client and many backend services. It does three jobs:

  • It combines calls to several services.
  • It reshapes the responses into exactly what the screens need.
  • It hides the internal boundaries between services.

It solves several problems for the frontend team:

  • Fewer round trips. One screen no longer needs five requests over a slow mobile network. Instead, the BFF fans out (sends the calls in parallel) over the fast internal network.
  • Tailored responses. The client does less mapping and downloads less.
  • Secrets stay on the server. For example, the BFF holds the session in an httpOnly cookie, which JavaScript cannot read. It calls the services with service tokens.
  • A place for extra work, such as caching, feature flag evaluation and SSR (server-side rendering).

It has costs. It is another service to run and monitor. There is also a risk that business logic slowly drifts into it.

In practice, a Next.js server often plays the BFF role, with route handlers and server components.

  • A BFF is an aggregation layer per client type, owned by the frontend team.
  • It means fewer round trips and responses shaped for each screen.
  • It keeps secrets and tokens on the server.
  • Its cost is one more service to run. Do not let business logic creep into it.