React Server Components vs Client Components di Next.js

Sejak Next.js 13 memperkenalkan App Router, konsep Server Components dan Client Components menjadi hal esensial yang wajib dipahami setiap developer React.

Server Components (Default)

Secara default, semua komponen di App Router adalah Server Components. Artinya, komponen ini dirender di server dan tidak pernah dikirim ke browser sebagai JavaScript.

Kelebihan:

• Bundle JavaScript lebih kecil (kode tidak dikirim ke client)
• Bisa langsung akses database atau API dengan token rahasia
• Support async/await langsung di komponen
• SEO friendly karena HTML pre-rendered

// app/page.tsx (Server Component - default)
export default async function Page() {
  const posts = await getPosts(); // langsung fetch

  return (
    <ul>
      {posts.map(p => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

Client Components

Untuk komponen yang butuh interactivity (state, event handler, browser API), gunakan Client Components dengan directive "use client" di baris pertama.

Kapan pakai Client Components?

1. Butuh useState, useEffect, atau hooks lain
2. Ada event handler (onClick, onChange, dll)
3. Pakai browser-only API (window, localStorage)
4. Komponen dari library yang butuh client-side (misal carousel, chart)

// components/SearchBox.tsx
"use client";

import { useState } from "react";

export function SearchBox() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

Aturan Penting

Pattern: Composition

Cara terbaik adalah membagi komponen. Server Component fetch data, lalu pass sebagai props ke Client Component.

// app/page.tsx (Server)
import { SearchBox } from "./SearchBox";

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

Kesimpulan: Default ke Server Components. Hanya pakai “use client” ketika benar-benar butuh interactivity. Ini akan membuat aplikasi lebih cepat dan bundle lebih kecil.