## Giới thiệu Khi phát triển cùng lúc một ứng dụng web và một ứng dụng di động, việc dùng chung một API REST/GraphQL thường dẫn đến over‑fetching, under‑fetching hoặc logic nghiệp vụ lặp lại ở client. Mẫu Backend‑for‑Frontend (BFF) giải quyết vấn đề này bằng cách tạo một lớp trung gian riêng cho từng nền tảng, điều chỉnh dữ liệu và hợp nhất nhiều service lại trước khi trả về cho client. ## Lợi ích chính - **Tách biệt trách nhiệm**: Web BFF có thể gộp nhiều endpoint, thêm trường SEO, nén payload; Mobile BFF có thể loại bỏ trường không cần thiết, chuyển đổi định dạng ngày tháng phù hợp với thiết bị. - **Bảo mật**: Token, secret key, rate‑limit được xử lý ở BFF, client chỉ giữ access token ngắn hạn. - **Tốc độ phát triển**: Frontend team tự chủ động mở rộng BFF mà không cần chờ backend core. ## Kiến trúc mẫu 1. **API Gateway** (nginx / Kong) định tuyến request đến BFF tương ứng dựa trên header `x-platform`. 2. **Web BFF** (Node.js/Express hoặc Next.js API routes) gọi các micro‑service: User, Product, Order, sau đó merge và trả về JSON tối ưu cho trình duyệt. 3. **Mobile BFF** (Node.js/Fastify hoặc Go) gọi cùng các service nhưng chọn lọc trường, nén bằng protobuf hoặc gzip, thêm field `deep_link` cho deeplink handling. 4. **Shared library** chứa DTO, validation schema, error handling dùng chung để tránh duplicate code. ## Ví dụ thực tế: Lấy chi tiết sản phẩm ```js // Web BFF endpoint app.get('/api/web/products/:id', async (req, res) => { const [product, reviews, seo] = await Promise.all([ productSvc.get(req.params.id), reviewSvc.listByProduct(req.params.id), seoSvc.getMeta(req.params.id) ]); res.json({ product, reviews, seo }); }); // Mobile BFF endpoint app.get('/api/mobile/products/:id', async (req, res) => { const product = await productSvc.get(req.params.id); // chỉ trả field cần thiết cho mobile const { id, name, price, thumbnail, shortDesc } = product; res.json({ id, name, price, thumbnail, shortDesc }); }); ``` ## Mẹo triển khai - **Sử dụng OpenAPI spec** cho từng BFF để frontend tự sinh type/client SDK. - **Cache ở BFF** (Redis) cho dữ liệu ít thay đổi (danh mục, cấu hình) để giảm latency. - **Feature flag** tại BFF để bật/tắt trường mới mà không deploy frontend. - **Observability**: gắn correlation‑id, log request/response, metric latency riêng cho web và mobile. ## Kết luận BFF không phải lớp thêm phức tạp mà là cầu nối thông minh giúp mỗi nền tảng nhận đúng dữ liệu, đúng định dạng, đúng thời điểm. Áp dụng mẫu này trong monorepo React Web + React Native sẽ làm giảm bundle size, tăng tốc độ tải và dễ dàng mở rộng tính năng độc lập cho từng platform.