Menguasai React Server Components pada 2026

React 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.

Apakah Server Components?

Secara 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.

Manfaat

1. Saiz Berkas Sifar: Kebergantungan yang digunakan dalam Server Components (seperti penghurai markdown atau pustaka tarikh yang berat) kekal pada pelayan.
2. Akses Backend Langsung: Anda boleh membuat pertanyaan pangkalan data secara langsung di dalam komponen anda tanpa mendedahkan titik akhir API.
3. Pemisahan Kod Automatik: Komponen klien yang diimport di sisi pelayan dipecahkan secara automatik kepada berkas berasingan.

Corak Pengambilan Data

Dengan RSC, anda boleh menjadikan komponen anda async dan menunggu 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>Pengguna</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense untuk Penstriman

Oleh kerana pengambilan data boleh menjadi perlahan, balut komponen anda dalam <Suspense> untuk menunjukkan UI sandaran serta-merta semasa data dimuatkan.

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

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

Menyelitkan Komponen Server dan Klien

Salah satu aspek yang paling mengelirukan ialah cara menggabungkan komponen Server dan Klien.

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.

Corak "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)}>
      Bilangan: {count}
      {children} {/* Ini boleh menjadi Server Component! */}
    </div>
  );
}

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

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* Ini berfungsi dengan sempurna */}
    </ClientWrapper>
  );
}

Perangkap Biasa

1. 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.
2. Menambah Event Handler: Anda tidak boleh menambah onClick atau onChange pada Server Component. Logik itu terletak dalam nod daun Client Component yang generik.

Kesimpulan

React 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.