Thành phần bất đồng bộ

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 23 trên 47.

Đây là thành quả từ những gì chương trước đã chuẩn bị. Một thành phần máy chủ có thể là async:

import { getDishes } from '../lib/data';

export default async function Page() {
    const dishes = await getDishes();

    return <h1>{dishes.length} dishes</h1>;
}

Hãy đọc lại điều đó, vì đây thực sự là điều mới mẻ. Thành phần chờ. Next.js chạy thành phần này trên máy chủ, để await hoàn tất, rồi mới chuyển kết quả thành HTML.

Hãy so sánh với phiên bản chỉ chạy trên trình duyệt mà nếu không thì bạn sẽ viết:

Trang tải trống trước
Một yêu cầu được gửi đi sau khi trang đã tải xong
Một trạng thái thay đổi và nội dung xuất hiện, tạo ra hiện tượng nhấp nháy mà người dùng thấy mỗi lần

Với một thành phần máy chủ bất đồng bộ, không có lần hiển thị rỗng ban đầu. Không có gì để chuyển sang, vì dữ liệu đã có sẵn khi HTML được tạo. Không có useEffect, không có cờ tải, không có yêu cầu thứ hai.

Hai quy tắc giúp cách này hợp lệ:

Chỉ các component server mới có thể dùng async: component có đánh dấu 'use client' thì không thể
Dữ liệu phải đến từ nơi máy chủ có thể truy cập: cơ sở dữ liệu, tệp hoặc module như lib/data.js

Thử thách

Dễ

lib/data.js đã được cung cấp và khóa. Tệp này xuất getDishes(), hàm này trả về một promise chứa mảng các đối tượng { id, name }.

Biến Page trong app/page.jsx thành một hàm async.
Dùng await getDishes() để lấy dữ liệu vào biến dishes.
Bên trong <ul id="dish-list">, hiển thị một <li> cho mỗi món ăn, với key={dish.id}, id={dish.id} và name của món ăn làm nội dung.

Không dùng useEffect, không cần cờ tải, chỉ cần await.

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 tra

Bà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

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 client Tó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