Máy chủ bên trong 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 21 trên 47.
Đây là quy tắc mà hầu như ai cũng hiểu sai, và nó quyết định bạn có thể khai thác máy chủ đến mức nào.
Một component phía client không thể import component phía server: việc import kéo component đó qua ranh giới, khiến nó cũng trở thành code phía client. Vì vậy, mọi người kết luận rằng mọi thứ bên trong một wrapper có tính tương tác đều phải là code phía client. Kết luận đó không đúng.
Một thành phần phía máy khách có thể hiển thị nội dung phía máy chủ được truyền vào dưới dạng children.
Điểm khác biệt nằm ở bên thực hiện việc hiển thị. Khi một trang trên máy chủ ghi đoạn này:
<Panel>
<Details />
</Panel>…máy chủ kết xuất server và chuyển kết quả hoàn chỉnh cho Panel dưới dạng prop. Panel không bao giờ nhập nó hay chạy nó, mà chỉ quyết định đặt nó ở đâu. Đối với component phía client, children là một phần giao diện đã hoàn thiện.
Điều này cho phép một thành phần tương tác nhỏ (thanh tab, hộp thoại, bảng có thể thu gọn) bao bọc lượng lớn nội dung chỉ dành cho máy chủ mà không đưa bất kỳ nội dung nào vào trình duyệt. Phần tương tác vẫn rất nhỏ, còn nội dung vẫn nằm trên máy chủ.
Hãy nhớ hình ảnh này: lớp bọc phía máy khách, phần nhân phía máy chủ.
Thử thách
Trung bìnhcomponents/Panel.jsx là một thành phần phía máy khách (đã khóa, hãy đọc): thành phần này hiển thị một nút bật tắt và chỉ hiển thị children khi đang mở.
Hiện tại, trang hiển thị phần chi tiết bên cạnh bảng thay vì bên trong, nên nút bật tắt không điều khiển được gì.
- Trong
app/page.jsx, chuyển<p id="details">vào giữa các thẻ<Panel>để làm phần tử con của chúng. - Giữ nguyên văn bản và để
app/page.jsxlà một thành phần phía máy chủ: không thêm chỉ thị.
Đoạn văn vẫn được hiển thị trên máy chủ. Thành phần phía máy khách Panel chỉ quyết định có hiển thị đoạn văn đó hay không.
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