BFF is a pattern where you create dedicated backend services for each type of frontend client rather than having one general-purpose API.

The Problem It Solves

A single API tries to serve everyone — mobile, web, third-party — but each client has different needs:

• Mobile needs lightweight, battery-efficient payloads
• Web dashboards need rich, aggregated data
• Third-party clients need stable, versioned contracts

One API becomes bloated trying to satisfy all of them.

How BFF Works

Each frontend gets its own BFF layer that:

• Aggregates calls to multiple downstream services
• Shapes the response to exactly what that client needs
• Handles auth, caching, and error formatting per client

Key Responsibilities of a BFF

Responsibility Example Data aggregation Combine user + orders + products in one call Response shaping Send only 5 fields to mobile, 20 fields to web Protocol translation REST on the outside, gRPC internally Auth handling Session tokens for web, JWT for mobile Error formatting Friendly messages for UI vs raw codes for APIs

BFF vs API Gateway

API Gateway BFF Purpose Routing, rate limiting, auth Business logic, data shaping Owned by Platform/infra team Frontend team Per client? No — shared Yes — one per client type Logic inside? Minimal Rich aggregation logic

They’re not competing — you often use both. The API Gateway sits in front of all BFFs.

When to Use BFF

Good fit when:

• You have multiple client types (web, mobile, TV, etc.)
• Clients have very different data needs
• Frontend teams want autonomy over their API contract
• You need to migrate from a monolith gradually

Not worth it when:

• You have a single client type
• Your app is small/simple
• You can’t afford the operational overhead of extra services

Real-World Example (Next.js)

For a freelance project, a BFF is typically your Next.js API routes or Route Handlers — they call your raw backend services and return shaped, client-ready responses. That’s BFF in practice, even if you don’t call it that.

// app/api/dashboard/route.ts — your BFF layer
export async function GET(req: Request) {
  const [user, orders, stats] = await Promise.all([
    fetchUser(),
    fetchOrders(),
    fetchStats(),
  ]);
// Shape exactly what the web dashboard needs
  return Response.json({ user, recentOrders: orders.slice(0, 5), stats });
}

The core idea: your frontend should never have to make 5 calls when 1 will do — that’s the BFF’s job.

Thanks for reading this blog, if you think this blog helped you give a clap,that will help me to write more good blog like this and allow follow me to get email alerts.

https://buymeacoffee.com/vigneshwik0

LinkedIn: https://www.linkedin.com/in/vigneshbalaji07/
GitHub: https://www.github.com/vigneshkb07
X: https://x.com/vigneshbaladev
Website: https://vigneshkb-portfolio.web.app/
1:1 Topmate: https://topmate.io/vignesh_k_b

BFF (Backend for Frontend) Architecture was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.