prefetch-data-link

Extends Next.js <Link>. This package enables the invoking of getInitialProps when prefetching a page.

That way, if you use a caching layer in getInitialProps, the page data will be already cached when you click the link, thus producing the same instantaneous navigation that is possible with prefetched static pages.

This approach is explained in more detail in our blog post: Increasing the Performance of Dynamic Next.js Websites.

Usage

This component extends Next.js <Link>, so you can use the same parameters and expect the same behavior. Additionally, you can pass the prop withData, which will make it run getInitialProps when prefetching (this only works when prefetch is also used). So a usage with data prefetching would look like this:

Prefetching Pages

⚠️ This is a production only feature ⚠️

<Link prefetch withData href="…">
  <a>Your Dynamic Page</a>
</Link>

Next.js has an API which allows you to prefetch pages.

Since Next.js server-renders your pages, this allows all the future interaction paths of your app to be instant. Effectively Next.js gives you the great initial download performance of a website, with the ahead-of-time download capabilities of an app. Read more.

With prefetching Next.js only downloads JS code. When the page is getting rendered, you may need to wait for the data.

When getInitialProps is invoked by this component, the context will receive an isVirtualCall flag set to true, which can be used to skip fetching resources that will not be cached, so these calls are not made unnecessarily.