Need help with data-prefetch-link?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

scaleapi
130 Stars 9 Forks MIT License 32 Commits 6 Opened issues

Description

Extends next.js <Link> to allow invoking getInitialProps when prefetching a page

Services available

!
?

Need anything else?

Contributors list

data-prefetch-link

Extends

 to allow invoking 
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.

Installation

npm i --save data-prefetch-link

Usage

This component extends Next.js

, 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:
import Link from 'data-prefetch-link'

Some dynamic page

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.

Note

Prefetching data should be used strategically, rather than habitually.

A good use case might be high-level pages in the header navigation, in which there are typically only a handful. Or when you'd expect a link to get clicked on.

You probably wouldn't want to use it on large lists of links (e.g. grid with infinite scroll) as this would negatively affect performance — for both your users and the web server that's handling the requests.

Licence

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.