All language subtitles for 005 Prefetching_en

We've seen how we can use the Link component

to enable client-side navigation in our app,

meaning that clicking on a link

will immediately update the contents on the page,

without requesting a separate HTML

document from the server.

I also mentioned something about "prefetching".

If I simply move the mouse over the link,

even without clicking it,

Next.js makes a request to the server,

fetching some data for the "/about" route.

It does this on mouse over only

when using the dev server.

This is one of those things that

are different in production.

So let's see how it works in that case.

I'll stop the dev server,

and type "npm run build",

to create a build based on our latest code.

We can now start the production server,

and let's go and see how our app works,

if we restart from the home page.

We see a few network requests.

If we filter only HTML documents,

by clicking "Doc",

it loaded a single HTML document.

If we select "Fetch" instead,

we can see three requests here,

one for each link in our navigation bar.

The first one shows "localhost" as the name,

but it's really the root path,

that's the home page.

So, in production Next.js prefetches all our links

right after loading the initial page.

But what are these requests exactly?

Let's look at the reviews one for example.

Even though the URL is "/reviews",

this request didn't return an HTML document,

but some special data used by

React Server Components.

If we look at the Response,

we can see the full data here.

It's in a rather strange format, that

we don't really need to understand.

The important thing is that it

contains all the information

required by Next.js to render the Reviews page,

if the user navigates to that route.

In fact, if we clear the history,

and select All requests

we can now go and click the Reviews link,

and we see the Reviews content,

without any further request

being sent to the server.

So, Next.js prefetches all our links,

so that it has all the data already available

to display each different route

if the user clicks on a link.

This way navigation happens instantly.

It does also mean that our app loads some extra data,

for all the links.

That's usually fine, because that data

is only loaded after the main HTML.

So the user will still see

the initial page quickly,

and then the link data will be

fetched in the background.

But what if we don't want this behaviour?

Suppose that, for example,

our About page is very big

and we know that very few people actually open it.

We could avoid loading the data for this link

by setting the "prefetch" prop to be "false".

This will disable prefetching

for this particular link.

Let's see what this means in practice.

We'll need to rebuild our app first,

to include this change into the production build.

Then we can run "npm start" again,

and go and test our pages in the browser.

I'll start from the root path as usual.

Once again, there will be a single

HTML document to start with.

But if we look at the Fetch requests,

you can see that in this case

it only prefetched two links:

"localhost" (that's the Home page), and "reviews".

It didn't load any data for the About page,

because we explicitly disabled

prefetching for that link.

In fact, if we clear the history,

we can still open the Reviews link without

making any further request,

because that one was prefetched.

But let's try the About link.

Note that nothing happens when

we move the mouse over,

so it's still different from the dev server.

But when we actually click the link

it does make a new request,

fetching the data required for the About route.

The data is still in the React

Server Components format,

not a full HTML document.

That makes it smaller.

You can see that it's just

1 kilobyte in this case.

While if we request the full HTML page,

by reloading this URL,

under documents,

the full HTML is 2 kilobytes.

So the data used by React Server Components

is only half the size of the HTML.

It should still load faster than the full page,

even without prefetching the link.

Although this is a very simple page.

Anyway, the key point is that in production

by default Next.js prefetches all

the links in our initial page,

to make navigation faster.

But you can disable this behaviour if you want to

by setting the "prefetch" prop

on the Link component.