Trạng thái tải

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

Một trang bất đồng bộ chỉ nhanh bằng lần tải chậm nhất. Trong lúc Next.js chờ, người dùng đang nhìn vào… chính xác là gì?

Đặt một tệp loading.jsx cạnh trang, và câu trả lời là: bất cứ thứ gì bạn muốn.

app/
    slow/
        page.jsx       the async page
        loading.jsx    shown while it resolves

Đây là một thành phần thông thường có phần xuất mặc định và không nhận thuộc tính nào:

export default function Loading() {
    return <p>Loading the special…</p>;
}

Bạn không bao giờ tự kết xuất tệp này hay nhập nó. Đặt tệp bên cạnh trang sẽ bao trang đó trong một ranh giới Suspense: Next.js hiển thị loading.jsx ngay khi bạn điều hướng, thay bằng trang thật khi các thao tác await hoàn tất và giữ cho bố cục xung quanh không bị nhấp nháy.

Có hai điều suy ra từ vị trí của tệp:

Tệp này bao phủ trang nằm cùng cấp với nó và mọi thứ nằm sâu bên dưới, cho đến khi một loading.jsx ở cấp sâu hơn thay thế
Chỉ trang được thay đổi: phần đầu trang và thanh điều hướng từ bố cục vẫn giữ nguyên và vẫn có thể nhấp vào

Hãy để ý những gì bạn không viết: không có cờ tải, không có trạng thái, không có if (loading). Tên tệp chính là cơ chế.

Thử thách

Dễ

app/slow/page.jsx chờ tải chậm, còn app/slow/loading.jsx đã có nhưng đang trống.

Bên trong <main>, thêm một <p> có id="loading".
Nội dung của thẻ phải chính xác là Loading the special...

Không thể chỉnh sửa trang và lib/data.js. Các bài kiểm tra truy cập /slow và xem màn hình trước khi dữ liệu đến.

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