Tóm tắt: máy chủ và client

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 22 trên 47.

Thử thách

Trung bình

Tóm tắt chương: tự xác định ranh giới giữa máy chủ và máy khách.

Trang liệt kê các món ăn trên máy chủ, nhưng cũng đặt onClick trực tiếp lên một nút, khiến ứng dụng không thể hiển thị. Hãy sửa lỗi này mà không đánh dấu trang là thành phần máy khách:

Trong components/OpenHours.jsx, tạo một thành phần máy khách ('use client' ở dòng 1) có trạng thái boolean open và hiển thị một nút có id="toggle". Nội dung nút phải là Show hours khi đang đóng và Hide hours khi đang mở.
Khi đang mở, thành phần cũng hiển thị một thẻ <p> có id="hours" và nội dung Open 9am-5pm. Khi đang đóng, đoạn văn đó không được tồn tại.
Trong app/page.jsx, thay nút bị lỗi và đoạn văn luôn hiển thị bằng <OpenHours />, được nhập từ '../components/OpenHours'. Tiêu đề và danh sách món ăn giữ nguyên: trang vẫn là một thành phần máy chủ.

Tự làm thử

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục app Trang đầu tiên Ôn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong clientTóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chung Bố cục lồng nhau Siêu dữ liệu trang Siêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gì Biểu mẫu có thể hoạt động Đọc dữ liệu biểu mẫu Làm mới trang Ôn tập: Server Actions