Ringkasan: Server & Client
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 22 dari 47.
Tantangan
SedangRekap bab: tentukan sendiri batas server/client.
Halaman ini menampilkan hidangan di server, tetapi juga memasang onClick langsung pada tombol, sehingga aplikasi sama sekali tidak akan dirender. Perbaiki tanpa menandai halaman sebagai komponen client:
- Di
components/OpenHours.jsx, buat komponen client ('use client'di baris 1) yang menyimpan booleanopendalam state dan merender tombol denganid="toggle". Teksnya harusShow hourssaat tertutup danHide hourssaat terbuka. - Saat terbuka, komponen ini juga merender
<p>denganid="hours"dan teksOpen 9am-5pm. Saat tertutup, paragraf itu tidak boleh ada. - Di
app/page.jsx, ganti tombol yang rusak dan paragraf yang selalu terlihat dengan<OpenHours />, yang diimpor dari'../components/OpenHours'. Heading dan daftar hidangan harus tetap persis seperti semula: halaman 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>
);
}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