React.lazy nạp bundle JavaScript của một component theo nhu cầu (chỉ khi nó render lần đầu). Suspense hiện một UI dự phòng trong khi bất kỳ con lazy (hoặc con suspend-vì-dữ-liệu) nào còn đang nạp.
jsx
= .( ());
() {
(
);
}
React.lazy nạp bundle JavaScript của một component theo nhu cầu (chỉ khi nó render lần đầu). Suspense hiện một UI dự phòng trong khi bất kỳ con lazy (hoặc con suspend-vì-dữ-liệu) nào còn đang nạp.
= .( ());
() {
(
);
}
Không có code splitting, trình duyệt tải toàn bộ app của bạn (kể cả thư viện vẽ biểu đồ nặng) trước khi hiện bất cứ gì. Với lazy, code của Chart được tách thành file riêng và chỉ được tải khi người dùng thực sự tới nó — cải thiện thời gian tải ban đầu và Core Web Vitals.
Khi Chart suspend (bundle của nó chưa sẵn sàng), React "tạm dừng" phần đó của cây và render fallback của Suspense gần nhất thay vào, rồi thay component thật vào khi nó nạp xong. Một boundary duy nhất có thể bọc nhiều con lazy và hiện một fallback:
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense cũng điều phối nạp dữ liệu với các framework/thư viện "suspend" khi một fetch đang chờ, và kết hợp với streaming SSR (Next.js App Router) để gửi một shell nhanh và stream các phần chậm hơn. Đặt boundary một cách suy nghĩ để tránh các dịch chuyển layout lớn, chói khi nội dung bật ra.