Menguasai React Server Components di 2026

React Server Components (RSC) telah mengubah secara fundamental cara kita membangun aplikasi React. Dengan memindahkan logika rendering ke server, kita dapat mengurangi secara signifikan bundle JavaScript yang dikirim ke client, menghasilkan waktu muat yang lebih cepat dan pengalaman pengguna yang lebih baik. Dalam artikel ini, kita akan mengeksplorasi pola-pola lanjutan dan praktik terbaik untuk memanfaatkan RSC di 2026.

Apa itu Server Components?

Secara tradisional, komponen React dirender sepenuhnya di client (CSR) atau di-pre-render di server sebagai HTML (SSR) dan kemudian dihidrasi di client. Server Components memungkinkan kita merender komponen secara eksklusif di server. Kode mereka tidak pernah dikirim ke browser.

Manfaatnya

1. Ukuran Bundle Nol: Dependensi yang digunakan di Server Components (seperti parser markdown atau library tanggal yang berat) tetap di server.
2. Akses Backend Langsung: Anda dapat melakukan query ke database langsung di dalam komponen tanpa mengekspos endpoint API.
3. Code Splitting Otomatis: Client components yang diimpor di sisi server secara otomatis dipecah kodenya.

Pola Pengambilan Data

Dengan RSC, Anda dapat membuat komponen async dan mengawait data secara langsung.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense untuk Streaming

Karena pengambilan data bisa lambat, bungkus komponen Anda dalam <Suspense> untuk menampilkan UI fallback segera saat data dimuat.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Menggabungkan Server dan Client Components

Salah satu aspek yang paling membingungkan adalah bagaimana menggabungkan Server dan Client components.

Aturan Umum: Server Components dapat mengimpor Client Components. Client Components tidak dapat mengimpor Server Components secara langsung. Namun, Anda dapat meneruskan Server Component sebagai children ke Client Component.

Pola "Children"

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Count: {count}
      {children} {/* This can be a Server Component! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

Jebakan Umum

1. Menggunakan Context di Server Components: Context adalah konsep sisi client. Jika Anda perlu berbagi data di sisi server, teruskan sebagai props atau gunakan cache cakupan request yang khusus.
2. Menambahkan Event Handler: Anda tidak dapat menambahkan onClick atau onChange ke Server Component. Logika tersebut ditempatkan di Client Component generik sebagai node daun.

Kesimpulan

React Server Components bukan hanya sebuah fitur; ini adalah pergeseran paradigma. Dengan memahami batas antara server dan client, Anda dapat membangun aplikasi yang sangat interaktif dan luar biasa cepat.