Cách Next.js tăng tốc các thao tác điều hướng bằng tính năng tìm nạp trước tuyến đường và cách tuỳ chỉnh tính năng này.
Bạn sẽ học được gì?
Trong bài đăng này, bạn sẽ tìm hiểu cách hoạt động của tính năng định tuyến trong Next.js, cách tính năng này được tối ưu hoá cho tốc độ và cách tuỳ chỉnh sao cho phù hợp nhất với nhu cầu của bạn.
Thành phần <Link>
Trong Next.js, bạn không cần thiết lập định tuyến theo cách thủ công.
Next.js sử dụng định tuyến dựa trên hệ thống tệp, cho phép bạn chỉ cần tạo tệp và thư mục
bên trong thư mục ./pages/
:
![Ảnh chụp màn hình thư mục trang chứa ba tệp: http://index.js, margherita.js và Pineapple-pizza.js.](https://web.dev/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=5&hl=vi)
Để liên kết đến các trang khác nhau, hãy sử dụng
<Link>
, tương tự như cách bạn
sử dụng phần tử <a>
cũ tốt:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Khi bạn sử dụng thành phần <Link>
để điều hướng, Next.js sẽ thực hiện một chút
nhiều hơn cho bạn. Thông thường, trang sẽ được tải xuống khi bạn nhấp vào đường liên kết đến trang đó, nhưng
Next.js tự động tìm nạp trước JavaScript cần thiết để hiển thị trang.
Khi bạn tải trang có một vài liên kết, tỷ lệ khớp là vào thời điểm bạn theo dõi một đường liên kết mà thành phần đằng sau nó đã được tìm nạp. Cách này giúp cải thiện khả năng phản hồi của ứng dụng bằng cách giúp điều hướng đến trang mới nhanh hơn.
Trong ứng dụng mẫu bên dưới, trang index.js
liên kết đến margherita.js
bằng
<Link>
:
Sử dụng Công cụ của Chrome cho nhà phát triển để xác minh rằng margherita.js
đã được tìm nạp trước:
1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình
.
- Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
Nhấp vào thẻ Mạng.
Chọn hộp kiểm Tắt bộ nhớ đệm.
Tải lại trang.
Khi bạn tải index.js
, thẻ Network (Mạng) cho thấy margherita.js
đang
cũng đã tải xuống:
Cách hoạt động của quá trình tìm nạp trước tự động
Next.js chỉ tìm nạp trước các đường liên kết xuất hiện trong khung nhìn và sử dụng tính năng Intersection
Observer API
để phát hiện chúng. Chế độ này cũng tắt tính năng tìm nạp trước khi kết nối mạng chậm
hoặc khi người dùng
Save-Data
đã bật. Dựa trên những bước kiểm tra này, Next.js sẽ tự động chèn các thẻ <link
rel="preload">
để tải các thành phần xuống cho
các thao tác điều hướng tiếp theo.
Next.js chỉ tìm nạp JavaScript; thì mã đó sẽ không thực thi. Bằng cách đó, tải xuống mọi nội dung bổ sung mà trang được tìm nạp trước có thể yêu cầu cho đến khi bạn truy cập đường liên kết.
Tránh tìm nạp trước không cần thiết
Để tránh tải nội dung không cần thiết xuống, bạn có thể tắt tính năng tìm nạp trước hiếm khi
các trang đã truy cập bằng cách đặt thuộc tính prefetch
trên <Link>
thành false
:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
Trong ứng dụng mẫu thứ hai này, trang index.js
có <Link>
để
pineapple-pizza.js
với prefetch
được đặt thành false
:
Để kiểm tra hoạt động mạng, hãy làm theo các bước trong ví dụ đầu tiên. Thời gian
bạn tải index.js
, thẻ Mạng của Công cụ cho nhà phát triển cho thấy margherita.js
đang
đã tải xuống, nhưng pineapple-pizza.js
thì không:
Tìm nạp trước bằng định tuyến tuỳ chỉnh
Thành phần <Link>
phù hợp với hầu hết các trường hợp sử dụng, nhưng bạn cũng có thể tạo
thành phần của riêng bạn để định tuyến. Next.js giúp bạn dễ dàng thực hiện điều này bằng
có sẵn trong next/router
.
Nếu bạn muốn làm một việc gì đó (ví dụ: gửi biểu mẫu) trước khi chuyển đến
tuyến đường mà bạn có thể xác định tuyến đường đó trong mã định tuyến tùy chỉnh của mình.
Khi sử dụng các thành phần tuỳ chỉnh để định tuyến, bạn cũng có thể thêm tính năng tìm nạp trước vào các thành phần đó.
Để triển khai hoạt động tìm nạp trước trong mã định tuyến, hãy sử dụng phương thức prefetch
từ
useRouter
Hãy xem components/MyLink.js
trong ứng dụng mẫu này:
Quá trình tìm nạp trước được thực hiện bên trong
hook useEffect
. Nếu
Thuộc tính prefetch
trên <MyLink>
được đặt thành true
, tuyến được chỉ định trong
Thuộc tính href
được tìm nạp trước khi <MyLink>
hiển thị:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Khi bạn nhấp vào đường liên kết, việc định tuyến sẽ hoàn tất trong handleClick
. Một tin nhắn sẽ nhận được
được ghi vào bảng điều khiển, rồi phương thức push
sẽ điều hướng đến tuyến mới
được chỉ định trong href
:
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
Trong ứng dụng ví dụ này, trang index.js
có một <MyLink>
đến margherita.js
và
pineapple-pizza.js
. Thuộc tính prefetch
được đặt thành true
trên /margherita
và đến false
vào ngày /pineapple-pizza
.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
Khi bạn tải index.js
, thẻ Network (Mạng) cho thấy margherita.js
đang
đã tải xuống và pineapple-pizza.js
thì không:
Khi bạn nhấp vào một trong hai đường liên kết, Bảng điều khiển sẽ ghi lại thông báo "Giải trí cùng Next.js". và điều hướng đến tuyến mới:
Kết luận
Khi bạn sử dụng <Link>
, Next.js sẽ tự động tìm nạp trước JavaScript cần thiết để
hiển thị trang được liên kết, giúp việc điều hướng đến các trang mới nhanh hơn. Nếu bạn
bằng cách sử dụng định tuyến tùy chỉnh, bạn có thể sử dụng API bộ định tuyến Next.js để triển khai
tự tìm nạp trước. Tránh tải nội dung xuống khi không cần thiết bằng cách vô hiệu hoá
tìm nạp trước cho các trang hiếm khi được truy cập.