React 19 Server Components — Panduan Lengkap untuk Developer

React 19 — Paradigma Baru dalam Pengembangan UI

React 19 bukan sekadar update biasa. Ini adalah perubahan fundamental dalam cara kita membangun aplikasi React — dari client-first menjadi server-first. Server Components, Server Actions, dan hook baru mengubah arsitektur aplikasi React secara signifikan.

🧩 Apa Itu Server Components?

Server Components (RSC) adalah komponen React yang hanya berjalan di server. Mereka tidak pernah dikirim ke browser sebagai JavaScript.

Keuntungan utama:

Zero bundle size — kode komponen tidak masuk ke client bundle
Direct database access — bisa query database langsung tanpa API layer
Akses filesystem — baca file, environment variables langsung
Automatic code splitting — client components di-lazy load otomatis

📝 Contoh Server Component

// app/posts/page.tsx — Server Component (default)
import { db } from "@/lib/database";

export default async function PostsPage() {
  // Query database langsung — tidak perlu API route!
  const posts = await db.posts.findMany({
    orderBy: { createdAt: "desc" },
    take: 10,
  });

  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

⚡ Server Actions — Form Handling Tanpa API

Server Actions memungkinkan kita menjalankan fungsi server langsung dari komponen:

// app/contact/page.tsx
export default function ContactPage() {
  async function submitForm(formData: FormData) {
    "use server";
    const name = formData.get("name");
    const email = formData.get("email");
    await db.contacts.create({ data: { name, email } });
  }

  return (
    <form action={submitForm}>
      <input name="name" required />
      <input name="email" type="email" required />
      <button type="submit">Submit</button>
    </form>
  );
}

🪝 Hook Baru: use()

React 19 memperkenalkan hook use() yang bisa membaca Promise dan Context secara conditional:

import { use, Suspense } from "react";

function UserProfile({ userPromise }) {
  // use() bisa dipanggil di dalam conditional!
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}

// Usage dengan Suspense
<Suspense fallback={<Loading />}>
  <UserProfile userPromise={fetchUser(id)} />
</Suspense>

🔄 useActionState & useFormStatus

Dua hook baru untuk form handling yang lebih baik:

"use client";
import { useActionState } from "react";
import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>;
}

function EditForm({ updateAction }) {
  const [state, action] = useActionState(updateAction, null);
  return (
    <form action={action}>
      {state?.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <SubmitButton />
    </form>
  );
}

🏗️ Server vs Client Component — Kapan Pakai Apa?

Server Component — data fetching, akses DB, rendering statis, komponen tanpa interaktivitas
Client Component — event handlers (onClick, onChange), useState/useEffect, browser APIs, interaktivitas user

Rule of thumb: mulai dengan Server Component, tambahkan "use client" hanya ketika butuh interaktivitas.

⚠️ Breaking Changes dari React 18

forwardRef tidak lagi diperlukan — ref otomatis di-forward sebagai prop
useContext digantikan oleh use(Context)
Cleanup function di ref callback sekarang didukung
<Context.Provider> diganti dengan <Context> langsung

Kesimpulan

React 19 adalah lompatan besar menuju arsitektur server-first. Server Components mengurangi JavaScript yang dikirim ke client, Server Actions menyederhanakan data mutation, dan hook baru seperti use() membuat async patterns lebih natural. Jika kamu menggunakan Next.js 14+, kamu sudah bisa memanfaatkan semua fitur ini sekarang.