Data fetching strategy for Mercari Global Marketplace web app

Mercari · 2025 · 3. Quy mô lớn · Độ khó: Trung bình — bài gốc

Một bài trong series Global App (ngoài sheet). Lý do có BFF chung và so sánh với web Nhật (hơn 20 fetch mỗi trang chi tiết): Mercari 2025.

Bối cảnh

Web Global là Next.js (React Server Components) trong monorepo module hoá; BFF viết bằng gRPC, dùng chung với iOS và Android.

Connect protocol (connect-node trên server Next.js): RPC qua HTTP, tương thích ngữ nghĩa với gRPC, cùng giao thức với BFF. Kiểu TypeScript sinh từ Protobuf bằng Buf; GitHub Action chạy mỗi khi .proto đổi, sinh SDK TypeScript và xuất bản thành gói npm nội bộ.
Data Access Layer (DAL) là module duy nhất nói chuyện với BFF: transport cấu hình một chỗ (HTTP/2) với chuỗi interceptor: logger sinh X-Request-Id để lần theo request qua microservice; platform đặt X-Platform: web (BFF dùng chung với app); auth đọc token từ cookie; locale suy vùng và ngôn ngữ từ host + đường dẫn (X-Region-Code, Accept-Language). Service chia theo domain (cart, item-detail, account), hàm bậc cao bọc lỗi chung (ví dụ gRPC NotFound → trang 404 của Next.js).
Một lần gọi BFF cho mỗi màn hình: feature module (RSC) gọi DAL để lấy toàn bộ dữ liệu màn hình; cache trong một request bằng cache() của React.

Hợp đồng sinh từ proto giữ kiểu frontend khớp backend mà không viết tay; gom mọi thứ cắt ngang (auth, locale, tracing, lỗi) vào một tầng để feature không lặp lại.

Từ nhiều fetch nối tiếp sang một lời gọi theo màn hình là chuyển việc ghép dữ liệu về phía server gần backend.
Header ngữ cảnh (request id, nền tảng, vùng) đặt ở một chỗ để BFF dùng chung phân biệt được client.