Tìm nạp trước tuyến đường trong Next.js

Cách Next.js tăng tốc quá trình điều hướng bằng cách tìm nạp trước tuyến đường và cách tuỳ chỉnh tuyến đường.

Milica Mihajlija

Bạn sẽ học được gì?

Trong bài đăng này, bạn sẽ tìm hiểu cách định tuyến trong Next.js hoạt động, cách thức tối ưu hoá cho tốc độ và cách tuỳ chỉnh phương thức này cho phù hợp nhất với nhu cầu của bạn.

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 chế độ định tuyến dựa trên hệ thống tệp, cho phép bạn chỉ 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 3 tệp: index.js, margherita.js và springapple-pizza.js.

Để liên kết đến nhiều trang, hãy dùng thành phần <Link>, tương tự như cách bạn sử dụng phần tử <a> cũ:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Khi sử dụng thành phần <Link> cho tính năng điều hướng, Next.js sẽ hỗ trợ bạn nhiều hơn. Thông thường, một trang sẽ được tải xuống khi bạn theo một đường liên kết đến trang đó, nhưng Next.js sẽ tự động tìm nạp trước JavaScript cần thiết để hiển thị trang đó.

Khi bạn tải một trang có một vài đường liên kết, rất có thể là vào thời điểm bạn nhấp vào một đường liên kết, thành phần phía sau đường liên kết đó đã được tìm nạp. Điều 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 việc điều hướng đến các trang mới nhanh hơn.

Trong ứng dụng ví dụ 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 View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).

  1. 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.

  2. Nhấp vào thẻ Mạng.

  3. Chọn hộp kiểm Tắt bộ nhớ đệm.

  4. Tải lại trang.

Khi bạn tải index.js, thẻ Network (Mạng) cho thấy margherita.js cũng được tải xuống:

Thẻ Mạng cho công cụ cho nhà phát triển, trong đó phần margherita.js được làm nổi bật.

Cách hoạt động của tính năng 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 Intersection Observer API để phát hiện các đường liên kết đó. Thao tác 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 bật Save-Data. Dựa trên những lần 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 hoạt động điều hướng tiếp theo.

Next.js chỉ tìm nạp JavaScript; không thực thi JavaScript. Bằng cách đó, hệ thống sẽ không tải bất kỳ nội dung bổ sung nào xuống mà trang được tìm nạp trước có thể yêu cầu cho đến khi bạn truy cập vào đườ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 cho các trang hiếm khi 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 ví dụ thứ hai này, trang index.js có <Link> đến 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. Khi bạn tải index.js, thẻ Mạng Công cụ cho nhà phát triển cho thấy margherita.js đã được tải xuống, nhưng pineapple-pizza.js thì không:

Thẻ Mạng cho công cụ cho nhà phát triển, trong đó phần margherita.js được làm nổi bật.

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 riêng để định tuyến. Next.js giúp bạn dễ dàng thực hiện việc này nhờ API bộ định tuyến có sẵn trong next/router. Nếu muốn thực hiện việc gì đó (ví dụ: gửi biểu mẫu) trước khi điều hướng đến một tuyến đường mới, bạn có thể xác định việc đó trong mã định tuyến tuỳ chỉ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 hoạt động tìm nạp trước vào các thành phần đó. Để triển khai tính năng tìm nạp trước trong mã định tuyến, hãy sử dụng phương thức prefetch của useRouter.

Hãy xem components/MyLink.js trong ứng dụng mẫu sau:

Quá trình tìm nạp trước được thực hiện bên trong hook useEffect. Nếu bạn đặt thuộc tính prefetch trên <MyLink> thành true, thì tuyến được chỉ định trong thuộc tính href sẽ được tìm nạp trước khi <MyLink> đó được kết xuất:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Khi bạn nhấp vào đường liên kết, quá trình định tuyến sẽ hoàn tất trong handleClick. Một thông báo sẽ được ghi lại vào bảng điều khiển và phương thức push sẽ chuyển đế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ó <MyLink> đến margherita.js và pineapple-pizza.js. Thuộc tính prefetch được đặt thành true trên /margherita và false trên /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) sẽ cho thấy margherita.js đã được tải xuống còn pineapple-pizza.js thì không:

Thẻ Mạng cho công cụ cho nhà phát triển, trong đó phần margherita.js được làm nổi bật.

Khi bạn nhấp vào một trong hai đường liên kết, Console (Bảng điều khiển) sẽ ghi lại nội dung "Thưởng thức Next.js." và chuyển đến tuyến mới:

Bảng điều khiển Công cụ cho nhà phát triển hiển thị thông báo &quot;Thưởng thức Next.js&quot;.

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 đang sử dụng chế độ định tuyến tuỳ chỉnh, bạn có thể dùng API bộ định tuyến Next.js để tự triển khai quá trình 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 tắt tính năng tìm nạp trước cho các trang hiếm khi truy cập.