Server di Dalam Client
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 21 dari 47.
Inilah aturan yang hampir selalu disalahpahami, dan aturan inilah yang menentukan seberapa jauh kamu bisa membebani server.
Komponen client tidak dapat mengimpor komponen server: mengimpornya akan membawanya melintasi batas dan komponen itu juga menjadi kode client. Jadi, orang menyimpulkan bahwa apa pun yang berada di dalam pembungkus interaktif harus berupa kode client. Kesimpulan itu salah.
Sebuah komponen client dapat merender konten server yang diberikan kepadanya sebagai children.
Perbedaannya terletak pada siapa yang melakukan perenderan. Saat halaman server menulis ini:
<Panel>
<Details />
</Panel>…server merender <Details /> dan memberikan hasil akhirnya kepada Panel sebagai prop. Panel tidak pernah mengimpornya atau menjalankannya: komponen ini hanya menentukan tempat untuk meletakkannya. Bagi komponen client, children adalah bagian UI yang sudah selesai.
Inilah yang memungkinkan shell interaktif kecil (bilah tab, modal, panel yang dapat diciutkan) membungkus banyak konten yang hanya tersedia di server tanpa memuatnya ke browser. Bagian interaktif tetap kecil, sementara kontennya tetap berada di server.
Bentuk yang perlu diingat: pembungkus client, isian server.
Tantangan
Sedangcomponents/Panel.jsx adalah komponen client (terkunci, baca kodenya): komponen ini menampilkan tombol alih dan hanya menampilkan children saat terbuka.
Saat ini halaman menampilkan detail di sebelah panel, bukan di dalamnya, sehingga tombol alih tidak mengontrol apa pun.
- Di
app/page.jsx, pindahkan<p id="details">agar berada di antara tag<Panel>sebagai children-nya. - Pertahankan teks persis seperti semula, dan biarkan
app/page.jsxsebagai komponen server: tanpa direktif.
Paragraf tetap dirender di server. Panel client hanya menentukan apakah akan menampilkannya.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar Next.js
4Server & Client
Dua Jenis KomponenMembaca ErrorBaris 'use client'Jaga Bagian Client Tetap KecilServer di Dalam ClientRingkasan: Server & Client