Dòng 'use 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 19 trên 47.
'use client' trông như một chuỗi thừa mà ai đó quên xóa. Nhưng không phải vậy: đây là một chỉ thị, và có hai quy tắc đáng ghi nhớ vì cả hai đều dễ khiến bạn mắc lỗi.
Quy tắc 1: phải là dòng đầu tiên
Trước các dòng import. Trước những chú thích quan trọng. Ngay dòng đầu tiên trong tệp:
'use client';
import { useState } from 'react';Đặt dòng này bên dưới một câu lệnh import thì nó không còn là chỉ thị nữa: nó trở thành một biểu thức chuỗi vô nghĩa, tệp vẫn là một thành phần máy chủ và bạn gặp lỗi về hook như thể mình chưa từng nhập dòng đó. Lỗi này khiến mọi người mất khá nhiều thời gian vì dòng đó vẫn nằm ngay trong tệp, trông có vẻ đúng.
Quy tắc 2: nó đánh dấu toàn bộ tệp
Không có cách nào để đánh dấu riêng một thành phần. Nếu một tệp có chỉ thị này, mọi thứ được định nghĩa trong đó đều là code phía client:
'use client';
function Row() { … } // phía máy khách
export default function Table() { … } // cũng ở phía máy kháchVà ảnh hưởng này lan xuống dưới: mọi thứ mà một thành phần phía máy khách (client component) nhập vào và hiển thị cũng trở thành code phía máy khách. Một chỉ thị ở đầu tệp lớn có thể âm thầm gửi rất nhiều JavaScript đến trình duyệt, và đó chính là vấn đề mà bài học tiếp theo giải quyết.
Thử thách
Dễcomponents/Counter.jsx có dòng 'use client' ở sai vị trí. Ứng dụng vẫn gặp lỗi hook.
- Di chuyển
'use client';lên dòng đầu tiên củacomponents/Counter.jsx, phía trên câu lệnh import.
Cả hai thành phần trong tệp đó, Counter và ResetButton mà nó hiển thị, đều trở thành thành phần phía máy khách nhờ dòng đó. Bạn không cần chỉ thị thứ hai và không nên thêm chỉ thị đó.
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