https://github.com/scaleapi/data-prefetch-link
Extends next.js <Link> to allow invoking getInitialProps when prefetching a page
https://github.com/scaleapi/data-prefetch-link
caching nextjs prefetch react
Last synced: 9 months ago
JSON representation
Extends next.js <Link> to allow invoking getInitialProps when prefetching a page
- Host: GitHub
- URL: https://github.com/scaleapi/data-prefetch-link
- Owner: scaleapi
- License: mit
- Created: 2017-12-26T19:36:20.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T21:18:13.000Z (over 2 years ago)
- Last Synced: 2024-04-29T13:20:26.474Z (over 1 year ago)
- Topics: caching, nextjs, prefetch, react
- Language: JavaScript
- Homepage:
- Size: 257 KB
- Stars: 131
- Watchers: 7
- Forks: 9
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://scale.com/blog/performance-on-next-js-websites).
## Installation
```sh
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:
```jsx
import Link from 'data-prefetch-link'
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