How to prefetch code for multiple pages from one page request in Next.js?

Question

Using client-side navigation I can navigate between pages using only JavaScript. The first request of a page takes some time to render and then the navigation back to it is nearly instant. During that first render that page only loads what’s necessary for it. That isolates each page making them independent. I just want to know, if there is a way to load the code for more than one page on a single request.

As an example, let's say I have multiple profile pages for a user (info, settings, history). I want to load the code for all of those pages on one request for any of those pages, so the navigation between them will be instant, and there will be no waiting time.

juliomalves · Accepted Answer · 2022-06-05 16:02:50Z

2

As long as the links (using next/link) to those pages are within the viewport the pages will be prefetched by default when in production mode (prefetch doesn't work in dev mode, though).

prefetch - Prefetch the page in the background. Defaults to true. Any <Link /> that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. When prefetch is set to false, prefetching will still occur on hover. Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production.

If you're not using next/link to navigate to those pages, then you can use router.prefetch to force the prefetch.

router.prefetch(url, as)

url - The URL to prefetch, including explicit routes (e.g. /dashboard) and dynamic routes (e.g. /product/[id])

as - Optional decorator for url. Before Next.js 9.5.3 this was used to prefetch dynamic routes, check our previous docs to see how it worked

edited Jun 5, 2022 at 16:02

answered Jun 5, 2022 at 15:55

juliomalves

51.1k23 gold badges181 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Artiom O Over a year ago

but what if I have a large amount of data and I want to navigate right after the page was rendered?

juliomalves Over a year ago

Prefetching will occur in the background as the page gets loaded.

Artiom O Over a year ago

this is the actual problem. What if it doesn't have time to fully prefetch the page? I want to find a way to load the javascript for multiple pages at once. In the docs, it is said:

A user opens their browser and navigates to your-blog.com/posts/first-post. What JavaScript is initially loaded for this page?

and the response: JavaScript for the entire application is loaded.. What if I want to, lets say load the javascript not only for the first post, but for the home page too

juliomalves Over a year ago

Again, as I said, using prefetch will do what you want. Simply having a next/link to the home page in /posts/first-post, or forcing the prefetch with router.prefetch('/home') will prefetch the JS code for that page too when /posts/first-post page gets loaded.

Ritik Sharma · Accepted Answer · 2024-10-12 14:35:57Z

0

This is surprising to me because I manually added prefetch in the link, and now the pages open instantly. Before, it took a few milliseconds to load the pages.

I don't understand why, as I found the true default in production, but it works differently for me.

answered Oct 12, 2024 at 14:35

Ritik Sharma

12 bronze badges

Collectives™ on Stack Overflow

How to prefetch code for multiple pages from one page request in Next.js?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related