Backend for Frontend (BFF) Architecture

Tulisan ini membahas mengenai arsitektur Backend for Frontend (BFF) yang saya implementasikan pada proyek AI Agent Customer Service. Penerapan arsitektur ini dimanfaatkan melalui kapabilitas bawaan framework Next.js yang mendukung perancangan antarmuka sekaligus penanganan logika server-side (Route Handlers / Server Actions).

Dengan pendekatan ini, beban komputasi di sisi client dapat dikurangi secara signifikan, serta mempermudah perancangan mekanisme sistem yang lebih kompleks dan aman.

Konsep Dasar Arsitektur BFF

Arsitektur Backend for Frontend (BFF) merupakan pola desain di mana lapisan antarmuka pengguna (frontend) memiliki lapisan backend internal khusus yang bertindak sebagai perantara (intermediary layer) sebelum berkomunikasi dengan backend utama atau layanan microservices.

Dalam ekosistem modern seperti Next.js (Monorepo), lapisan BFF terintegrasi langsung dalam proyek aplikasi. Hal ini memberikan beberapa keunggulan utama:

Kinerja Aplikasi Lebih Cepat: Pengurangan round-trip time (RTT) antara browser dan server.
Pengiriman Data Lebih Efisien: Mengirimkan hanya data yang dibutuhkan oleh komponen UI (data trimming).
Kemandirian Pengembangan: Tim frontend dapat menyesuaikan struktur payload API secara mandiri tanpa harus selalu menunggu perubahan pada backend utama.

Fungsi Utama Arsitektur BFF

Penerjemah & Agregasi Data (Data Aggregation & Transformation) Mengambil data dari berbagai endpoint layanan backend, lalu menggabungkan (stitching) dan mengubah format data tersebut agar langsung siap digunakan oleh komponen UI.
Mengurangi Beban Klien (Client Offloading) Membuat aplikasi frontend menjadi lebih ringan dengan cara mengalihkan logika bisnis yang rumit dan pemanggilan API jamak ke sisi server BFF.
Lapisan Keamanan Tambahan (Enhanced Security Layer) Menyimpan rahasia sensitif seperti API key, session token, atau refresh token secara aman di sisi server (HTTP-Only cookies / Server memory) tanpa pernah mengeksposnya secara langsung ke browser client.

Implementasi pada Proyek AI Agent Customer Service

Pada proyek AI Agent Customer Service, saya menerapkan lapisan BFF sehingga browser client tidak langsung berkomunikasi dengan backend utama. Pendekatan ini saya manfaatkan untuk dua kebutuhan utama:

1. Otomatisasi Refresh Token

Untuk merender halaman, frontend membutuhkan data dari backend utama. Daripada membebankan logika penanganan token yang expired pada interceptor di browser client, pemanggilan API dialihkan melalui lapisan BFF terlebih dahulu.

Diagram Refresh Token Otomatis

Mekanisme Kerja:

Request dari Client: Frontend (client) melakukan pemanggilan API internal ke lapisan BFF.
Forwarding Request: Lapisan BFF meneruskan pemanggilan API tersebut ke backend utama dengan menyertakan token autentikasi.
Kondisi Token Valid: Jika token valid, data dari backend utama akan diterima oleh BFF dan langsung diteruskan ke client untuk dirender di halaman.
Kondisi Token Expired / Invalid:
- Jika pemanggilan gagal karena token kadaluwarsa, lapisan BFF secara transparan akan mengeksekusi mekanisme refresh token ke endpoint refresh pada backend utama.
- Token baru yang didapatkan kemudian disimpan kembali di sisi server BFF untuk pemanggilan API berikutnya.
- Setelah refresh token berhasil, BFF akan mengulang request utama ke backend dan mengembalikan hasilnya ke client.

Dengan demikian, tercipta mekanisme refresh token yang sepenuhnya otomatis dan transparan dari sudut pandang user/client.

2. Menggabungkan Sumber Data (Data Aggregation)

Dalam beberapa kasus pada proyek saya, sebuah halaman membutuhkan informasi gabungan dari beberapa endpoint backend utama yang berbeda.

Diagram Menggabungkan Sumber Data

Mekanisme Kerja:

Lapisan BFF menerima satu pemanggilan API dari client.
BFF kemudian melakukan pemanggilan secara paralel ke berbagai endpoint backend utama.
Hasil dari seluruh endpoint tersebut digabungkan (aggregated) dan dirapikan di sisi server BFF.
Client hanya menerima satu respons payload tunggal yang sudah bersih dan siap pakai, sehingga memangkas jumlah request HTTP yang harus dilakukan oleh browser.

Kesimpulan

Penerapan arsitektur Backend for Frontend (BFF) pada proyek AI Agent Customer Service terbukti memberikan manfaat yang nyata:

Memperketat keamanan autentikasi pengguna melalui otomatisasi penanganan token di sisi server.
Memaksimalkan kecepatan rendering halaman melalui agregasi data.
Menjaga kode frontend tetap bersih, fokus pada tampilan UI, dan terbebas dari boilerplate logic pemanggilan API yang rumit.