Komponen pelayan diberikan pada pelayan, jangan meningkatkan saiz klien, dan sesuai untuk pemerolehan data dan kandungan statik; Komponen pelanggan dijalankan di pelayar, menyokong interaksi dan pengurusan negeri. 1. Komponen pelayan tidak boleh menggunakan cangkuk seperti UseState dan boleh mengakses pangkalan data secara langsung; 2. Komponen pelanggan perlu diisytiharkan dengan 'Gunakan Pelanggan' untuk mengendalikan peristiwa dan kesan sampingan; 3. Komponen pelanggan boleh tertanam dalam komponen pelayan, tetapi tidak sebaliknya; 4. Prioriti menggunakan komponen pelayan untuk mengurangkan jumlah pembungkusan JS dan meningkatkan prestasi; 5. Gunakan komponen pelanggan apabila interaksi diperlukan. Hanya dengan pembahagian buruh yang betul boleh kelebihan seni bina baru React akan dimainkan.

Komponen Server React (RSC) dan komponen klien adalah dua model komponen yang diperkenalkan dalam React 18. Mereka pada dasarnya berbeza dalam membuat masa, persekitaran berjalan, dan senario penggunaan. Memahami perbezaan mereka dan bagaimana mereka bekerjasama adalah penting untuk membina aplikasi reaksi yang berprestasi tinggi, boleh dipelihara, moden.

Apakah komponen pelayan dan komponen pelanggan?

Komponen pelayan

• Rendering pada pelayan tidak menggunakan saiz pakej JavaScript klien .
• Cangkuk seperti useState dan useEffect tidak boleh digunakan kerana mereka tidak berjalan dalam penyemak imbas.
• Sumber backend (seperti pangkalan data, sistem fail) boleh diakses secara langsung tanpa panggilan API tambahan.
• Keputusan rendering dihantar kepada pelanggan dalam struktur JSON yang ringan, yang "disusun semula" ke DOM oleh React pada sisi klien.

Komponen pelanggan

• Berjalan di penyemak imbas, logik interaktif (pengendalian acara, pengurusan negeri, kesan sampingan, dan lain -lain) boleh digunakan.
• Akan meningkatkan saiz pembungkusan, setiap perpustakaan atau cangkuk yang diimport akan dimasukkan ke dalam bundle JS.
• Sesuai untuk mengendalikan interaksi pengguna, animasi, API penyemak imbas (seperti LocalStorage), dll.

? Cukup letakkan:

• Komponen Pelayan: Bertanggungjawab untuk pengambilalihan data dan rendering kandungan statik (lebih cepat dan lebih ringan)
• Komponen Pelanggan: Bertanggungjawab untuk Interaksi dan Tingkah Laku Dinamik

Bagaimana membezakan komponen pelayan dan klien?

Bermula dengan React 18, Next.js (App Router) dibezakan oleh konvensyen penamaan fail:

• Komponen pelayan (lalai) : Fail biasa .js/.tsx , tiada tag khas.
• Komponen Pelanggan : Arahan 'use client' mesti ditulis di bahagian atas fail.

 // clientcomponent.tsx
'Gunakan pelanggan';

import {usestate} dari 'react';

kaunter fungsi lalai eksport () {
  const [count, setCount] = useState (0);
  kembali <butang onClick = {() => setCount (count 1)}> {count} </button>;
}

 // servercomponent.tsx
import ClientComponent dari './clientComponent';
import {fetchdata} dari './api';

Eksport Fungsi Async ServerComponent () {) {
  const data = menunggu fetchData (); // Panggilan kembali terus ke pelayan (
    <dana>
      <h1> {data.title} </h1>
      <ClientComponent/> {/* Embed Client Component*/}
    </div>
  );
}

? NOTIS:

• Komponen pelanggan boleh tertanam dalam komponen pelayan, tetapi tidak sebaliknya.
• 'use client' mestilah baris pertama fail (walaupun terdapat komen sebelum ini).

Perbandingan kelebihan teras

Cadangan praktikal untuk digunakan: Bagaimana memilih?

? Prioriti menggunakan komponen pelayan ketika:

• Terutamanya memaparkan kandungan (artikel, butiran produk, senarai)
• Perlu mendapatkan data dari pangkalan data atau CMS
• Gunakan perpustakaan besar (seperti parser markdown, alat carta), tetapi tidak diperlukan interaksi
• Mahu mengurangkan masa pemuatan sampingan pelanggan (TTFB lebih cepat, JS kurang)

? Gunakan komponen pelanggan ketika:

• Memerlukan useState , useEffect , Custom Hook
• Terdapat interaksi seperti klik butang, borang penyerahan, dan animasi.
• Bergantung pada API Penyemak Imbas ( window , localStorage , navigator )
• Gunakan perpustakaan UI pihak ketiga (seperti Tailwind UI, komponen Radix)

Salah faham dan langkah berjaga -jaga yang biasa

• Mitos 1: Komponen Pelayan = SSR
  Tidak sepenuhnya benar. SSR (Server Side Rendering) menjadikan keseluruhan halaman ke HTML di sisi pelayan, tetapi semua komponen masih dimuat turun kepada klien untuk "menghidrat". RSC hanya menjalankan beberapa komponen di sisi pelayan dan tidak pernah menghantarnya kepada pelanggan .

• Salah faham 2: Komponen Pelayan tidak dapat lulus alat peraga ke komponen klien
  Boleh! Tetapi nota:

  • Prop yang diluluskan mestilah bersiri (fungsi, tarikh, peta, dan lain -lain tidak boleh diluluskan)
  • Fungsi perlu dikendalikan secara tidak langsung melalui useActionState atau panggilan balik acara

• Performance Pitfall: Berlebihan Komponen Pelanggan
  Sekiranya keseluruhan halaman dibuat menjadi komponen pelanggan, ia akan merosot menjadi spa tradisional dan kehilangan kelebihan RSC. Cuba gerakkan bahagian bukan interaktif ke komponen pelayan.

Contoh amalan terbaik

 // app/page.tsx - Komponen pelayan
Import Productlist dari './productlist'; // Komponen pelanggan
import {getProducts} dari '@/lib/pangkalan data';

Eksport fungsi async function home () {
  const products = menunggu GetProducts (); // Periksa pangkalan data terus kembali (
    <tain>
      <h1> Senarai Produk </h1>
      <ProductList Products = {Products} />
    </main>
  );
}

 // app/productlist.tsx - Komponen pelanggan
'Gunakan pelanggan';

import {usestate} dari 'react';

Eksport ProductList Fungsi Lalai ({Products}) {
  const [penapis, setFilter] = useState ('');

  const ditapis = products.filter (p =>
    p.name.cipludes (penapis)
  );

  kembali (
    <dana>
      <input 
        nilai = {penapis} 
        onChange = {(e) => setFilter (e.Target.Value)} 
        Placeholder = "Produk Carian"
      />
      <ul>
        {filtered.map (p => (
          <li key = {p.id}> {p.name} </li>
        ))}
      </ul>
    </div>
  );
}

Itu pada dasarnya.
Kuncinya bukan "mana yang lebih baik", tetapi "yang lebih sesuai untuk melakukan apa". Hanya melalui pembahagian buruh yang munasabah, yang membolehkan komponen pelayan bertanggungjawab untuk data dan kandungan, dan komponen klien bertanggungjawab untuk interaksi, bolehkah kuasa maksimum seni bina baru React dibebaskan.

Atas ialah kandungan terperinci Komponen Pelayan React vs Komponen Pelanggan: Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!