For instance you could have a NextJs web site with an index.js
web page that hyperlinks to an about web page and make contact with web page:
import Hyperlink from 'subsequent/hyperlink'
export default () => (<div>
<h1>My Index web page</h1>
<nav>
<Hyperlink href='/contact'>Contact</Hyperlink>
<Hyperlink href='/about'>About</Hyperlink>
</nav>
</div>)
Out of the field the NextJs framework will seek for the Hyperlink
tags and can preload and render the linked pages. So, when person decides to click on a hyperlink like<Hyperlink href="/contact">
the transition to the goal web page will likely be blazing quick. This the prefetching functionaliaty in NextJs.
Some notes on prefetching:
- it solely works only for the native inner pages of the present web site. For instance, if we have now
<Hyperlink href="https://www.google.com/">
the google.com web page is not going to be prerendered so the transition will likely be slower - initilay, solely the pages which have hyperlinks within the seen viewport will likely be prerendered. NextJs will watch because the person scrolls and brings new hyperlinks into the viewport and wil prerender the content material for these pages as their hyperlinks apper on the display screen
- the Nextjs prefetching will work provided that you employ the
<Hyperlink>
tags. Utilizing the plain outdated<a>
is not going to set off a prerender. Basically, it is not a superb ideea to make use of them in Subsequent - you possibly can disable the prefeching of hyperlink by setting the
prefetch
atrribute:<Hyperlink href='/index' prefetch={false}>
- what if the person press the again button? Nothing new will likely be loaded, as a result of the browser nonetheless has the outdated
index.js
bundle in place, able to load the/index
route. It is all computerized. After all this assume that index is a neighborhood web page of the present web site. - if the server sends the
save-data
HTTP header Nextjs prefetching is not going to work - the prefetching habits is barely being triggered in manufacturing mode. With a purpose to see it in motion you’ll want to cease the app if in improvement mode (
npm run dev
) and runnpm run construct
andnpm run begin
to make use of the manufacturing bundle