Server Component vs Client Component

Ide besarnya

Di Next.js App Router, semua komponen adalah Server Component secara default. Artinya di-render di server, dan yang dikirim ke browser hanya HTML. Ini bikin halaman cepat dan JavaScript yang diunduh kecil.

Client Component (dengan "use client") di-render di browser seperti React biasa, dan dibutuhkan untuk hal interaktif.

Kapan pakai apa?

Pakai Server Component untuk: mengambil data, mengakses database langsung, me-render konten statis, dan hal yang butuh API key rahasia.

Pakai Client Component untuk: useState, useEffect, event handler (onClick), dan API browser (localStorage, window).

// app/page.tsx (Server Component, default)
async function getData() {
  const res = await fetch("https://api.example.com/data");
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <Daftar data={data} />;
}

// app/daftar.tsx
"use client";

import { useState } from "react";

export default function Daftar({ data }: { data: string[] }) {
  const [filter, setFilter] = useState("");
  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ul>
        {data
          .filter((d) => d.includes(filter))
          .map((d) => (
            <li key={d}>{d}</li>
          ))}
      </ul>
    </div>
  );
}

Pola ideal: Server Component mengambil data, lalu mengoper ke Client Component kecil yang menangani interaksi.

Kesalahan umum pemula

• Menandai semua "use client" karena malas mikir. Ini menghapus keuntungan utama Next.js. Default-nya server, tandai client hanya yang butuh.
• Mengirim fungsi sebagai props ke Client Component. Fungsi tidak bisa di-serialize melewati batas server-client. Kirim data, bukan fungsi.
• Fetch data di Client Component padahal tidak butuh interaksi. Kalau datanya statis per halaman, fetch di Server Component lebih cepat dan lebih sedikit kode.

Latihan singkat

1. Buat halaman daftar produk: Server Component fetch data, Client Component kecil untuk filter pencarian.
2. Buka DevTools tab Network dan bandingkan ukuran JavaScript halamanmu dengan versi yang semuanya "use client".

Rangkuman

• Default di App Router adalah Server Component: di-render di server, ringan di browser.
• Client Component ("use client") untuk state, event, dan API browser.
• Pola ideal: server mengambil data, client kecil menangani interaksi.
• Jaga batas "use client" sekecil mungkin dan kirim props yang bisa di-serialize.

Catatan teknis: "use client" bukan berarti seluruh halaman jadi client-side. Ia hanya menandai batas: komponen itu dan turunannya di-render di browser. Sibling dan parent-nya tetap bisa Server Component. Salah kaprah umum adalah menaruh "use client" di root layout sehingga semua jadi client.