# link_data-prefetch

> Allows Next.js 'getInitialProps' to prefetch data while prefetching a page

Latest version **1.0.4** (published 2018-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install link_data-prefetch
pnpm add link_data-prefetch
yarn add link_data-prefetch
bun add link_data-prefetch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-07-01 |
| First published | 2018-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 54.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel Adam Martin |
| Maintainers | dmartss |
| Keywords | nextjs, dmartss, caching, prefetch, react |

## Links

- npm: https://www.npmjs.com/package/link_data-prefetch
- Repository: https://github.com/dmartss/personal-packages/
- Homepage: https://github.com/dmartss/personal-packages#readme
- Issues: https://github.com/dmartss/personal-packages/issues
- npm.io page: https://npm.io/package/link_data-prefetch

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-07-01
- 1.0.3 — 2018-06-29
- 1.0.2 — 2018-06-16
- 1.0.0 — 2018-05-19

## README

# 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](https://www.scaleapi.com/blog/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 ⚠️

```jsx
<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](https://zeit.co/blog/next#anticipation-is-the-key-to-performance).

> 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.

---
_Source: https://npm.io/package/link_data-prefetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._