1~
2React Server Components (RSC) telah mengubah secara asas cara kita membina aplikasi React. Dengan memindahkan logik pemaparan ke pelayan, kita boleh mengurangkan berkas JavaScript yang dihantar kepada klien dengan ketara, membawa kepada masa pemuatan yang lebih pantas dan pengalaman pengguna yang lebih baik. Dalam artikel ini, kita meneroka corak lanjutan dan amalan terbaik untuk memanfaatkan RSC pada 2026.
3~
4## Apakah Server Components?
5~
6Secara tradisional, komponen React dipaparkan sepenuhnya pada klien (CSR) atau dipra-papar pada pelayan sebagai HTML (SSR) dan kemudian dihidrat pada klien. **Server Components** membolehkan kita memaparkan komponen _secara eksklusif_ pada pelayan. Kod mereka tidak pernah dihantar ke pelayar.
7~
8### Manfaat
9~
101.  **Saiz Berkas Sifar**: Kebergantungan yang digunakan dalam Server Components (seperti penghurai markdown atau pustaka tarikh yang berat) kekal pada pelayan.
112.  **Akses Backend Langsung**: Anda boleh membuat pertanyaan pangkalan data secara langsung di dalam komponen anda tanpa mendedahkan titik akhir API.
123.  **Pemisahan Kod Automatik**: Komponen klien yang diimport di sisi pelayan dipecahkan secara automatik kepada berkas berasingan.
13~
14## Corak Pengambilan Data
15~
16Dengan RSC, anda boleh menjadikan komponen anda `async` dan menunggu 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>Pengguna</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 Penstriman
39~
40Oleh kerana pengambilan data boleh menjadi perlahan, balut komponen anda dalam `<Suspense>` untuk menunjukkan UI sandaran serta-merta semasa data dimuatkan.
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>Pengguna Saya</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Menyelitkan Komponen Server dan Klien
60~
61Salah satu aspek yang paling mengelirukan ialah cara menggabungkan komponen Server dan Klien.
62~
63**Peraturan Am**: Server Components boleh mengimport Client Components. Client Components _tidak boleh_ mengimport Server Components secara langsung. Walau bagaimanapun, anda boleh menghantar Server Component sebagai `children` kepada Client Component.
64~
65### Corak "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      Bilangan: {count}
79      {children} {/* Ini boleh menjadi 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 /> {/* Ini berfungsi dengan sempurna */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Perangkap Biasa
100~
1011.  **Menggunakan Context dalam Server Components**: Context adalah konsep sisi klien. Jika anda perlu berkongsi data di sisi pelayan, hantarkannya sebagai props atau gunakan cache skop permintaan yang khusus.
1022.  **Menambah Event Handler**: Anda tidak boleh menambah `onClick` atau `onChange` pada Server Component. Logik itu terletak dalam nod daun Client Component yang generik.
103~
104## Kesimpulan
105~
106React Server Components bukan sekadar ciri; ia adalah anjakan paradigma. Dengan memahami sempadan antara pelayan dan klien, anda boleh membina aplikasi yang sangat interaktif dan luar biasa pantas.
107~