Request Memoization

Satu fotokopi untuk tiga orang

Bayangkan tiga orang sekantor menitip fotokopi dokumen yang sama ke satu rekan. Rekan yang cerdas tidak akan bolak-balik ke mesin fotokopi tiga kali, ia pergi sekali, memfotokopi tiga rangkap, lalu membagikannya. Itulah request memoization: React melihat beberapa komponen meminta fetch yang identik dalam satu render, mengeksekusinya sekali, lalu membagi hasilnya.

Kenapa konsep ini ada? Komponen yang baik itu mandiri: Header butuh data user untuk menampilkan nama, Profile butuh data user yang sama untuk menampilkan bio. Tanpa memoization, kemandirian ini berbiaya mahal: dua request duplikat ke API. Pilihan lainnya, prop drilling data user dari page ke seluruh pohon komponen, membuat kode kaku dan sulit dipindah-pindah. Memoization memberi jalan ketiga: tiap komponen fetch datanya sendiri dengan tenang, React yang menggabungkannya.

// lib/data.ts
// Contoh 1: helper yang dipakai banyak komponen
async function getUser() {
  const res = await fetch("https://api.example.com/user");
  if (!res.ok) throw new Error("Gagal memuat user");
  return res.json();
}

// app/page.tsx
// Contoh 2: dua komponen memanggil helper yang sama
import { getUser } from "@/lib/data";
import Header from "@/components/Header";   // di dalamnya: await getUser()
import Profile from "@/components/Profile"; // di dalamnya: await getUser()

export default async function Page() {
  return (
    <>
      <Header />
      <Profile />
    </>
  );
  // fetch ke /user hanya terjadi 1x, hasilnya dibagi ke keduanya!
}

Meskipun getUser() dipanggil dua kali di dua komponen berbeda, request HTTP-nya cuma satu. Komponen tetap mandiri dan bisa dipindah ke halaman lain tanpa harus memastikan "apakah data user sudah di-fetch oleh parent?".

Syarat berlakunya

Memoization bukan sihir, ada batasnya yang harus dipahami:

• Hanya untuk request GET. Method lain (POST, PUT, DELETE) tidak di-memoize karena mereka mengubah data, menggabungkannya berbahaya.
• Hanya dalam satu render pass di server. Render berikutnya (atau request dari pengunjung lain) mengulang lagi, itu tugas Data Cache.
• URL dan opsinya harus identik. fetch(url) dan fetch(url, { cache: "no-store" }) dianggap dua request berbeda.

Kesalahan umum: mengira memoization menggantikan Data Cache. Tidak. Memoization menghemat duplikasi dalam satu render, sedangkan Data Cache menghemat pengulangan antar request pengunjung yang berbeda. Keduanya melengkapi, bukan menggantikan.

Catatan teknis: Implikasi desainnya besar: berhentilah melakukan prop drilling data hanya demi "hemat request". Biarkan tiap Server Component mengambil datanya sendiri lewat helper bersama, kode jadi modular dan mudah di-refactor. Memoization menjamin kamu tidak membayar biaya duplikasi untuk kerapian itu. Satu-satunya yang perlu dijaga: pastikan helper-nya memakai URL dan opsi yang konsisten supaya tetap dianggap identik.