11. State Management: Server State Deep Dive

Dalam arsitektur frontend modern, pemisahan antara Server State (data yang bersumber dari server database, bersifat asynchronous, dan membutuhkan sinkronisasi konstan) dan Client State (state UI lokal seperti modal open/close, tema, input form sementara) sangatlah penting. Untuk mengelola data yang berasal dari API (Server State), proyek ini WAJIB menggunakan pustaka caching khusus demi menghindari overhead penulisan fetcher manual dan boilerplate state management tradisional (seperti Redux).

Berikut adalah analisis mendalam mengenai dua library Server State terpopuler: TanStack Query dan SWR.

A. TanStack Query (React Query)

Pustaka manajemen server state yang sangat kuat (feature-rich) dan mandiri, dirancang untuk menangani siklus hidup asynchronous data fetching secara lengkap di aplikasi React/Next.js.

• Karakteristik:
  • Manajemen cache otomatis berbasis waktu (staleTime & gcTime).
  • Mekanisme refetching otomatis di latar belakang (on window focus, network reconnect, component remount).
  • Ekosistem terintegrasi untuk operasi baca (Queries) dan tulis/ubah (Mutations).
  • Dilengkapi DevTools visual interaktif bawaan.

🟢 Keunggulan (Advantages)

• Kontrol Caching Tingkat Tinggi: Konfigurasi caching yang sangat granular. Developer dapat menentukan durasi kesegaran data (staleTime) dan kapan data tidak aktif dibersihkan dari memori (gcTime).
• Sinkronisasi Latar Belakang Otomatis: Menjaga data tetap mutakhir dengan melakukan re-fetch otomatis ketika pengguna kembali ke tab aplikasi (window focus), koneksi internet pulih, atau lewat polling berkala.
• Manajemen Mutasi & Optimistic Updates: Menyediakan hooks useMutation yang sangat matang untuk mempermudah pembaruan data ke server, lengkap dengan kemampuan Optimistic Updates (UI diperbarui sebelum server memberikan respons sukses).
• Query Invalidation yang Canggih: Setelah melakukan mutasi, developer dapat membatalkan validasi cache key tertentu (queryClient.invalidateQueries) untuk memicu fetch ulang secara otomatis pada data yang terpengaruh.
• Pagination & Infinite Scroll Out-of-the-box: Dukungan bawaan untuk penanganan pagination (placeholderData) dan infinite scroll (useInfiniteQuery) dengan manajemen state loading yang rapi.
• DevTools Resmi yang Sangat Membantu: Memiliki panel visualizer khusus untuk memonitor, menguji, dan memanipulasi cache query secara langsung di browser saat development.

🔴 Kekurangan (Disadvantages)

• Ukuran Bundel (Bundle Size): Memiliki footprint bundle size yang relatif lebih besar (sekitar ~13kB gzipped) karena banyaknya fitur kompleks yang disediakan.
• Kurva Belajar (Learning Curve): Memerlukan waktu untuk memahami konsep caching lifecycle (fresh, stale, inactive, fetching) serta tata cara penulisan wrapper Query/Mutation.
• Overkill untuk Aplikasi Sederhana: Jika aplikasi Anda hanya melakukan fetch data sederhana tanpa membutuhkan caching, sinkronisasi konstan, atau mutasi data yang rumit, TanStack Query dapat terasa terlalu kompleks.

B. SWR (Stale-While-Revalidate)

Pustaka server state minimalis dan super ringan yang dikembangkan langsung oleh Vercel. SWR mengadopsi strategi HTTP RFC 5861: menyajikan data usang dari cache terlebih dahulu (stale), mengirimkan request fetch di latar belakang (revalidate), dan menyajikan data terbaru setelah selesai.

• Karakteristik:
  • Sangat ringan (footprint bundle kecil, hanya ~4kB gzipped).
  • Fokus utama pada penyederhanaan data fetching dan minimalisir boilerplate.
  • Sangat ramah terhadap arsitektur Next.js (SSR/SSG).

🟢 Keunggulan (Advantages)

• Super Ringan & Efisien: Ukuran pustaka yang sangat kecil sehingga tidak membebani ukuran bundle JavaScript akhir aplikasi klien Anda.
• Sintaksis Sederhana & DX Ramah: Hampir tidak ada boilerplate. Membuat custom hooks dengan useSWR sangat cepat dan menggunakan format penulisan yang bersih dan intuitif.
• Global Cache Sharing otomatis: Secara default, SWR akan berbagi instance cache untuk query key yang sama di seluruh aplikasi tanpa perlu dibungkus oleh Provider global di root (QueryClientProvider).
• Sinkronisasi Otomatis: Mendukung automatic re-validation saat window focus dan network reconnect secara bawaan demi menjaga kesegaran data.
• Integrasi Erat dengan Next.js: Sangat mudah diintegrasikan dengan pre-rendered data (SSR/SSG) menggunakan opsi fallback di Next.js.

🔴 Kekurangan (Disadvantages)

• Manajemen Mutasi & Cache Control Terbatas: Mekanisme penulisan ulang data (mutate API) tergolong dasar. Implementasi mutasi kompleks dan Optimistic Updates membutuhkan penulisan logika manual yang lebih panjang.
• Tanpa DevTools Resmi yang Matang: Tidak dilengkapi dengan DevTools resmi bawaan yang interaktif sekuat milik TanStack Query.
• Fitur Lanjutan Terbatas: Tidak memiliki penanganan bawaan yang matang untuk dependensi query berantai yang rumit, automatic garbage collection yang detail, atau custom retry timing yang granular.
• Pola Pagination Lebih Kompleks: Memerlukan plugin terpisah (swr/infinite) untuk mengelola daftar data tak terbatas, yang sintaksnya kurang ramah dibandingkan useInfiniteQuery.

Tabel Perbandingan Server State Tools

Panduan Memilih (Decision Guide)

1. Pilihlah TanStack Query jika:

   • Anda sedang mengembangkan Dashboard Enterprise, SaaS platform, atau aplikasi transaksional dengan banyak form input dan operasi CRUD (Create, Read, Update, Delete) yang intensif.
   • Anda membutuhkan optimasi user experience kelas atas seperti Optimistic Updates di banyak tempat.
   • Anda ingin visibilitas debug caching yang jelas melalui panel DevTools visual.

2. Pilihlah SWR jika:

   • Anda sedang membangun aplikasi web publik, landing page, blog, atau aplikasi e-commerce sederhana di mana ukuran bundle JS (performa SEO) dan kecepatan load awal sangat diutamakan.
   • Aplikasi dominan melakukan operasi baca data (Read-heavy) tanpa mutasi data yang rumit.
   • Anda menginginkan setup yang bersih, cepat, dan terintegrasi mulus dengan server-side rendering Next.js.

Contoh Server State (TanStack Query):

import { useQuery } from "@tanstack/react-query";
import api from "@/services/api";

export const useGetUsers = () => {
  return useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const { data } = await api.get("/users");
      return data;
    },
    staleTime: 5 * 60 * 1000, // Cache valid selama 5 menit
  });
};

Contoh Server State (SWR):

import useSWR from "swr";
import api from "@/services/api";

const fetcher = (url: string) => api.get(url).then((res) => res.data);

export function useUser(id: string) {
  const { data, error, isLoading } = useSWR(`/users/${id}`, fetcher);
  return { user: data, error, isLoading };
}