Jaga Bagian Client Tetap Kecil
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 20 dari 47.
Saat sebuah halaman membutuhkan satu tombol interaktif, ada jalan pintas yang menggoda: letakkan 'use client' di bagian atas halaman, lalu lanjutkan. Cara ini berhasil. Namun, ini juga cara paling umum untuk membuang semua yang baru saja diberikan Next.js kepadamu.
Ingat aturan 2: direktif ini menandai seluruh file. Halaman, heading, deskripsi, daftar hidangan, dan setiap komponen yang dirender semuanya menjadi kode client, diunduh dan dijalankan ulang di browser. Satu tombol menyeret seluruh halaman melewati batas.
Kebiasaan yang memperbaiki hal ini sederhana dan mekanis:
Turunkan
'use client'hingga ke daun-daun.
Pindahkan bagian interaktif ke file kecil tersendiri, tandai file itu, dan biarkan halaman tetap berada di server:
// app/page.jsx masih merupakan komponen server
import LikeButton from '../components/LikeButton';
export default function Home() {
return (
<main>
<h1>Coddy Eats</h1>
<LikeButton />
</main>
);
}Ada dua hal yang perlu diperhatikan. Pertama, komponen server dapat merender komponen client: arah ini sepenuhnya normal. Kedua, bentuk halaman tidak berubah, hanya satu bagian kecil yang berpindah.
Ada error kedua yang mendorongmu untuk membiasakan hal yang sama. Letakkan onClick langsung pada tombol di komponen server, lalu runtime akan menghentikanmu: Handler event tidak dapat diteruskan ke props Komponen Client. Handler adalah fungsi: handler tidak dapat sampai ke browser kecuali berada di file client.
Tantangan
MudahHalaman ini memasang onClick pada tombol di dalam komponen server, sehingga aplikasi tidak akan dirender sama sekali.
Perbaiki tanpa menandai halaman sebagai komponen client:
- Di
components/LikeButton.jsx, tulis komponen client ('use client'pada baris 1) yang menyimpan jumlah suka dalam state dan merender tombol denganid="like". Teksnya harus berupaLikes:diikuti jumlahnya. - Di
app/page.jsx, hapus tombol yang bermasalah dan render<LikeButton />sebagai gantinya. Impor dari'../components/LikeButton'. - Biarkan judul dan tagline persis seperti semula: halaman harus tetap menjadi komponen server.
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