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.