Belajar Fullstack Developer - State & Data Fetching

#Pendahuluan

Hampir semua bug "data tidak muncul", "halaman lambat", atau "UI tidak sinkron" di aplikasi fullstack berakar dari satu kesalahan: menempatkan data pada lapisan yang salah. Episode ini membahas state & data fetching — membedakan client state vs server state, memakai caching dan revalidation dengan benar, serta tools yang tepat untuk tiap kasus.

Pikirkan state sebagai dua dunia: server state adalah kebenaran di database, client state hanyalah cerminan sementara di browser. Kebingungan dimulai ketika developer memperlakukan keduanya sebagai satu hal.

#Client State vs Server State

Aturan emas: server state tidak perlu hidup di useState/useEffect. Jika data berasal dari database, biarkan server mengirimkannya dan cache di layer yang tepat — bukan menyalinnya ke state lokal yang akan cepat basi.

#Data Fetching Optimal di Next.js

Next.js memberi tiga cara membaca data, dan masing-masing punya perilaku cache yang berbeda:

#1. Fetch Default (Cached)

fetch di Server Component di-cache secara default oleh Next.js. Data yang sama dipakai bersama lintas request:

export default async function Page() {
  const res = await fetch("https://api.example/posts")
  const posts = await res.json()
  return <PostList posts={posts} />
}

#2. Revalidation Berbasis Waktu (ISR)

Data yang berubah jarang (misal daftar artikel) bisa di-revalidate otomatis tiap interval:

const res = await fetch("https://api.example/posts", {
  next: { revalidate: 60 },
})

#3. Revalidation Berbasis Event

Data yang berubah saat ada aksi (misal catatan baru) di-revalidate lewat revalidatePath — yang sudah kita pakai sejak episode 3:

import { revalidatePath } from "next/cache"
 
await prisma.note.create({ data: { title, body } })
revalidatePath("/notes")

Lapisan cache inilah yang menyelesaikan masalah N+1 dari episode 4: query yang sama diulang berkali-kali kini hanya dijalankan sekali, lalu disajikan dari cache sampai di-revalidate.

#Data yang Hidup di Client: TanStack Query

Ada data yang memang harus hidup di client — data yang berubah real-time dan dipakai lintas komponen. Untuk itu, jangan menulis cache manual; pakai TanStack Query yang menangani caching, retry, dan background refetch:

pnpm add @tanstack/react-query

"use client"
 
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
const client = new QueryClient()
 
export default function Provider({ children }: { children: React.ReactNode }) {
  return <QueryClientProvider client={client}>{children}</QueryClientProvider>
}

"use client"
 
import { useQuery } from "@tanstack/react-query"
 
export default function NoteStats() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["notes", "stats"],
    queryFn: async () => {
      const res = await fetch("/api/notes/stats")
      if (!res.ok) throw new Error("Gagal mengambil statistik")
      return res.json()
    },
  })
 
  if (isLoading) return <p>Memuat...</p>
  if (error) return <p>Terjadi kesalahan</p>
  return <p>Total catatan: {data.total}</p>
}

TanStack Query otomatis: cache hasil, retry saat gagal, dan refetch di background saat tab kembali fokus. Setelah mutasi, panggil invalidateQueries agar data terkait di-refetch:

const queryClient = useQueryClient()
await queryClient.invalidateQueries({ queryKey: ["notes"] })

#Kapan Server, Kapan Client: Keputusan Final

Aturannya sederhana: sebisa mungkin di server, sisanya di client dengan query cache — dan state UI murni tetap di useState.

#Praktik: Data Fetching Optimal

Selesaikan dengan mengaudit aplikasi catatan kalian:

1. Halaman /notes membaca via Prisma di server component (bukan useEffect).
2. Tambahkan revalidatePath di setiap server action yang menulis data.
3. Untuk statistik yang berubah tiap menit, gunakan fetch dengan revalidate: 60 atau TanStack Query.
4. Tidak ada satu pun useEffect untuk memuat data di aplikasi.

curl -s -o /dev/null -w "%{time_total}s\n" http://localhost:3000/notes
curl -s -o /dev/null -w "%{time_total}s\n" http://localhost:3000/notes

Request kedua harus jauh lebih cepat — bukti cache bekerja.

#Penutup

Inti yang harus dibawa pulang:

• Server state = kebenaran di database; client state = cerminan sementara.
• Jangan salin server state ke useState/useEffect — gunakan cache server.
• Tiga kata kunci cache Next.js: default, revalidate, revalidatePath/Tag.
• TanStack Query untuk data client: cache, retry, refetch otomatis.
• Aturan praktis: sesering mungkin di server, sisanya di query cache.

Di episode 9 selanjutnya kita membahas testing fullstack — unit test untuk API dan UI, integration test, dan end-to-end dengan Playwright — agar kalian bisa mengubah kode tanpa takut merusak yang lain. Sampai jumpa di episode 9!