Rahul Giri

Posted on Aug 20

🏗️ Backend for Frontend (BFF) — The Missing Layer Every Frontend Developer Should Know

#programming #react #ai #javascript

If you’ve been building modern apps with React, Next.js, Angular, or Vue, chances are you’ve run into messy APIs, performance bottlenecks, or “too much data vs too little data” problems.

That’s where Backend for Frontend (BFF) comes in.

This article will explain what BFF is, why we need it, when to use it, real-world scenarios, common pitfalls, and examples — in the simplest way possible.

🤔 What is Backend for Frontend (BFF)?

Imagine you’re building an e-commerce app.

Your mobile app needs a very compact API response (just product name, price, image).
Your web app needs a detailed product view (reviews, specs, seller info).
Your admin dashboard needs extra APIs (stock, margins, supplier details).

If all of them talk directly to your core backend (say a bunch of microservices), you’ll end up with:

Over-fetching data (getting more than you need)
Under-fetching data (having to call multiple APIs to stitch info)
Messy business logic leaking into frontend

👉 Solution: Put a BFF layer between frontend and backend.
Each frontend (Web, Mobile, Smartwatch, TV app) gets its own tailored backend API.

Frontend (Web/Mobile/TV)  --->  BFF  --->  Microservices/Core Backend

So, BFF is a backend layer that’s custom-built for a specific frontend.

🚀 Why Do We Need BFF?

Let’s make it super clear with real-life problems it solves:

1. 🎯 Different devices need different data

Mobile app: Needs lightweight, fast responses (battery + bandwidth sensitive).
Web app: Can handle richer data with more details.
Smartwatch: Needs tiny payloads (notifications, quick info).

Without BFF → you either write crazy conditions in frontend OR overload the core backend.

With BFF → each frontend gets exactly what it needs.

2. 🔐 Security & Abstraction

Core backend may expose sensitive data or complex microservices.
BFF can sanitize responses and hide internal details.

Example: Instead of exposing discountStrategyId=9, BFF can translate it into discount: 20%.

3. 🏎️ Performance Optimization

BFF can aggregate multiple microservice calls into one response.
No need for frontend to call 5 different APIs and merge data.

Example:
Instead of frontend calling separately:

/product/123  
/reviews/123  
/stock/123

BFF does it internally and returns:

{
  "id": 123,
  "name": "iPhone 15",
  "price": 900,
  "stock": 25,
  "reviews": [{...}]
}

4. ⚡ Faster Iteration for Frontend Teams

Frontend devs don’t need to wait for backend teams to create custom APIs.
They can update the BFF layer to shape responses as needed.

This is a big productivity boost.

🛠️ Real-World Scenarios Where BFF Shines

📱 E-Commerce App

Mobile app only shows: product name, price, image.
Web app shows: product + reviews + seller info.
BFF makes sure both get tailored responses from the same microservices.

🎬 Streaming Platforms (like Netflix)

TV app → needs high-quality video URLs.
Mobile app → adaptive video streams + subtitles.
Web app → trailers, recommendations, cast info.

Instead of one API trying to handle everything → separate BFFs optimize the experience.

🏦 Banking App

Customer app → shows account balance, transactions.
Employee dashboard → shows risk score, customer details, compliance flags.
BFF makes sure customer doesn’t accidentally see employee-only fields.

⚖️ Pros & Cons of BFF

✅ Benefits

Custom responses per frontend
Better performance (less over-fetching/under-fetching)
Hides backend complexity
Faster frontend development
Stronger security boundaries

❌ Drawbacks

Extra maintenance → one BFF per frontend means more services.
Duplication risk → common logic may be repeated across BFFs.
Latency → adds an extra hop between frontend and backend.
Team coordination → if not handled well, BFF becomes a mini-monolith.

⚠️ Corner Cases & Gotchas

Too Many Frontends → Too Many BFFs

If you have 10 frontends (iOS, Android, Web, TV, Car dashboard, etc.), maintaining 10 BFFs is painful.
Solution: Use a hybrid approach → some shared BFFs with configs.

Caching Problems

BFF responses may become a bottleneck if not cached properly.
Example: Same product requested by 1M users → always hitting microservices.
Solution: Add caching at the BFF layer (Redis, CDN).

Data Duplication

Same aggregation logic may be copied across multiple BFFs.
Solution: Move common logic to libraries or a shared service.

Latency Issues

BFF calls multiple microservices → increases request time.
Solution: Use parallel requests + batching inside BFF.

🧑‍💻 Example: A Simple BFF in Node.js (Express)

Here’s a tiny BFF for an e-commerce frontend:

import express from "express";
import fetch from "node-fetch";

const app = express();

app.get("/product/:id", async (req, res) => {
  const { id } = req.params;

  // Call multiple backend services
  const [productRes, reviewRes, stockRes] = await Promise.all([
    fetch(`http://catalog-service/products/${id}`).then(r => r.json()),
    fetch(`http://review-service/reviews/${id}`).then(r => r.json()),
    fetch(`http://inventory-service/stock/${id}`).then(r => r.json())
  ]);

  // Shape the response for frontend
  res.json({
    id: productRes.id,
    name: productRes.name,
    price: productRes.price,
    stock: stockRes.count,
    reviews: reviewRes
  });
});

app.listen(4000, () => {
  console.log("BFF running on port 4000");
});

Now your frontend can call:
/product/123 and get a ready-to-use response 🎉

🔮 When NOT to Use BFF

Very simple apps (one frontend, one backend) → no need for BFF.
When GraphQL fits better → GraphQL can solve under/over-fetching too.
If your team is small → extra maintenance might slow you down.

📝 Key Takeaways

BFF = a backend tailored for a specific frontend.
It solves problems of over-fetching, under-fetching, performance, and security.
Real-world examples: e-commerce, banking, streaming apps.
Downsides: extra maintenance, duplication, caching challenges.
Always weigh BFF vs GraphQL vs direct backend calls.

👉 Rule of Thumb:
If your app has multiple frontends with very different needs → BFF is a lifesaver.
If not → don’t over-engineer.

🔥 That’s it! You now know when, why, and how to use a BFF — with corner cases and real-life scenarios.

DEV Community