1~
2React 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.
3~
4## Apa itu Server Components?
5~
6Secara 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.
7~
8### Manfaatnya
9~
101.  **Ukuran Bundle Nol**: Dependensi yang digunakan di Server Components (seperti parser markdown atau library tanggal yang berat) tetap di server.
112.  **Akses Backend Langsung**: Anda dapat melakukan query ke database langsung di dalam komponen tanpa mengekspos endpoint API.
123.  **Code Splitting Otomatis**: Client components yang diimpor di sisi server secara otomatis dipecah kodenya.
13~
14## Pola Pengambilan Data
15~
16Dengan RSC, Anda dapat membuat komponen `async` dan mengawait data secara langsung.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense untuk Streaming
39~
40Karena pengambilan data bisa lambat, bungkus komponen Anda dalam `<Suspense>` untuk menampilkan UI fallback segera saat data dimuat.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Menggabungkan Server dan Client Components
60~
61Salah satu aspek yang paling membingungkan adalah bagaimana menggabungkan Server dan Client components.
62~
63**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.
64~
65### Pola "Children"
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Jebakan Umum
100~
1011.  **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.
1022.  **Menambahkan Event Handler**: Anda tidak dapat menambahkan `onClick` atau `onChange` ke Server Component. Logika tersebut ditempatkan di Client Component generik sebagai node daun.
103~
104## Kesimpulan
105~
106React 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.
107~