Hai lần gọi dữ liệu cùng lúc

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

Một trang thường cần nhiều thứ. Cách viết dễ thấy nhất cũng là cách chậm nhất:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, chỉ bắt đầu lúc này
// tổng cộng: 120ms

await có nghĩa là dừng lại ở đây. Lần tải thứ hai chỉ bắt đầu sau khi lần tải thứ nhất hoàn tất, dù nó không cần kết quả của lần tải thứ nhất.

Khởi chạy cả hai, rồi chờ cả hai:

const [dishes, drinks] = await Promise.all([
    getDishes(),
    getDrinks(),
]);
// tổng thời gian: 60ms

Bí quyết nằm ở thời điểm gọi. Gọi getDishes() mà không có await sẽ bắt đầu xử lý và trả về một promise ngay lập tức, nên đến khi Promise.all bắt đầu chờ thì cả hai lượt tải đều đang chạy. Hàm này trả về một mảng kết quả theo thứ tự bạn đã liệt kê.

Quy tắc chung:

Kết quả của một lần tải cần kết quả của lần tải kia → dùng các lệnh await tuần tự, không có cách nào khác
Chúng độc lập với nhau → Promise.all

Hai lượt tải là một thành công nhỏ. Năm lượt tạo nên sự khác biệt giữa một trang tải tức thì và một trang không như vậy.

Thử thách

Dễ

app/page.jsx tải các món ăn và đồ uống lần lượt. Chúng không liên quan đến nhau, nên hãy chạy chúng cùng lúc.

Thay hai await chạy lần lượt bằng một await Promise.all([...]), rồi phân rã kết quả thành dishes và drinks.

lib/data.js đã bị khóa và theo dõi xem hai lần tải có chạy chồng lên nhau hay không. Cuối cùng, #report phải hiển thị Ran together thay vì Ran one at a time.

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>
    );
}