Giữ phần client nhỏ gọn
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 20 trên 47.
Khi một trang cần một nút tương tác, bạn có thể muốn chọn cách làm tắt: thêm 'use client' vào đầu trang rồi tiếp tục. Cách này có hiệu quả. Nhưng đây cũng là cách phổ biến nhất để bỏ phí mọi thứ Next.js vừa mang lại cho bạn.
Hãy nhớ quy tắc 2: chỉ thị này đánh dấu toàn bộ tệp. Trang, tiêu đề, phần mô tả, danh sách món ăn và mọi thành phần mà chúng hiển thị đều trở thành code phía máy khách, được tải xuống và chạy lại trong trình duyệt. Chỉ một nút bấm đã đưa cả trang qua ranh giới này.
Thói quen giúp khắc phục điều này rất nhỏ và mang tính máy móc:
Đẩy
'use client'xuống các lá.
Tách phần tương tác thành một tệp nhỏ riêng, đánh dấu chính tệp đó, và để trang tiếp tục chạy trên máy chủ:
// app/page.jsx: vẫn là thành phần máy chủ
import LikeButton from '../components/LikeButton';
export default function Home() {
return (
<main>
<h1>Coddy Eats</h1>
<LikeButton />
</main>
);
}Có hai điều cần lưu ý. Thứ nhất, một thành phần máy chủ có thể kết xuất một thành phần máy khách: chiều này hoàn toàn bình thường. Thứ hai, trang không thay đổi bố cục; chỉ có một phần nhỏ được chuyển đi.
Có một lỗi thứ hai cũng khiến bạn hình thành thói quen tương tự. Gắn thẳng onClick vào một nút trong thành phần máy chủ, rồi môi trường chạy sẽ chặn bạn: Không thể truyền trình xử lý sự kiện vào các thuộc tính của thành phần máy khách. Trình xử lý là một hàm: nó không thể theo đến trình duyệt nếu không nằm trong một tệp phía máy khách.
Thử thách
DễTrang này đặt một onClick trên nút bên trong thành phần máy chủ, nên ứng dụng sẽ không hiển thị gì cả.
Sửa lỗi mà không đánh dấu trang là thành phần máy khách:
- Trong
components/LikeButton.jsx, viết một thành phần máy khách ('use client'ở dòng 1) lưu số lượt thích trong trạng thái và hiển thị một nút cóid="like". Nội dung nút phải làLikes:theo sau là số lượt thích. - Trong
app/page.jsx, xóa nút bị lỗi và thay bằng<LikeButton />. Nhập thành phần này từ'../components/LikeButton'. - Giữ nguyên tiêu đề và dòng giới thiệu: trang phải tiếp tục 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ự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức thiết yếu về Next.js
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng