React Academy · Pelajaran

Penjelasan Komponen Pelayan React

Fahami maksud RSC, perbezaannya daripada komponen klien dan masa untuk menggunakan setiap satunya.

Pelajaran 1 daripada 413 langkah

Penjelasan Komponen Pelayan React ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Selamat Datang

Dalam pelajaran ini, Anda akan mempelajari perkara yang dimaksudkan dengan React Server Components (RSC), perbezaannya daripada komponen klien dan masa untuk menggunakan setiap jenis.

Dua Dunia Komponen

React 19 dan App Router Next.js membahagikan komponen kepada dua dunia: **Komponen Pelayan** (render pada pelayan, tiada interaktiviti) dan **Komponen Klien** (render pada pelayan dan klien, mempunyai keadaan serta pengendali acara).

Komponen Pelayan secara Lalai

Dalam App Router Next.js, setiap komponen ialah Komponen Pelayan secara lalai. Anda boleh memilih mod Komponen Klien dengan menambahkan 'use client' pada bahagian atas fail.

// Server Component (default, no directive needed)
export default async function Page() {
  const data = await fetch('/api/posts').then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Komponen Klien

Tambahkan 'use client' pada bahagian atas fail untuk menjadikannya Komponen Klien. Komponen Klien boleh menggunakan useState, useEffect, pengendali acara dan API pelayar.

'use client';
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

Keupayaan Komponen Pelayan

Komponen Pelayan boleh: menunggu query pangkalan data, membaca sistem fail, mengakses rahsia persekitaran, mengimport pakej besar khusus pelayan dan render tanpa sebarang JavaScript dihantar kepada klien.

// Fetch from DB directly in the component!
import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.select().from(usersTable);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Had Komponen Pelayan

Komponen Pelayan CANNOT: menggunakan useState, useEffect, pengendali acara (onClick dan sebagainya), API pelayar (window, localStorage) atau konteks. Semua ini memerlukan 'use client'.

Menggubah Komponen Pelayan dan Klien

Corak lazim: Komponen Pelayan mengambil data dan meneruskannya kepada Komponen Klien sebagai prop. Pelayan mengendalikan data; klien mengendalikan interaksi.

// Server Component
export default async function Page() {
  const user = await getUser();
  return <ProfileEditor user={user} />; // client component
}

// Client Component (separate file)
'use client';
export function ProfileEditor({ user }) {
  const [name, setName] = useState(user.name);
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

Peraturan Sempadan Klien

Sebaik sahaja Anda menandai fail dengan 'use client', semua komponen yang diimport juga dianggap sebagai komponen klien. Sempadan antara pelayan dan klien berada pada tahap fail.

Sifar JavaScript untuk Komponen Pelayan

Komponen Pelayan dirender kepada HTML pada pelayan. Kod komponennya NEVER dihantar kepada pelayar. Ini mengurangkan saiz himpunan JavaScript dengan ketara.

Komponen Pelayan berbanding SSR

SSR tradisional render halaman penuh kepada HTML tetapi menghantar semua kod komponen kepada klien untuk penghidratan. Komponen Pelayan tidak pernah menghantar kodnya kepada klien — hanya keluarannya yang telah dirender.

Semakan Pantas

Apakah arahan yang Anda tambahkan kepada fail untuk menjadikannya Komponen Klien React dalam App Router Next.js?

Jawab dalam pelajaran interaktif

Imbas Kembali

Komponen Pelayan berjalan pada pelayan, boleh mengakses pangkalan data dan rahsia serta tidak menghantar JS kepada klien. Komponen Klien menambahkan 'use client' dan menyokong keadaan, kesan serta pengendali acara. Gubah kedua-duanya: pelayan mengambil data, klien berinteraksi.

Seterusnya

Pelajaran seterusnya: **Cangkuk use() untuk Sumber Tak Segerak** — Anda akan membaca janji dan konteks semasa render dengan cangkuk use() React 19.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Penjelasan Komponen Pelayan React” percuma?

Ya — teks penuh “Penjelasan Komponen Pelayan React” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Penjelasan Komponen Pelayan React”?

Fahami maksud RSC, perbezaannya daripada komponen klien dan masa untuk menggunakan setiap satunya. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Penjelasan Komponen Pelayan React” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy