# next-swr

> Revalidate stale data in Next.js

Latest version **0.2.0-canary.0** (published 2024-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-swr
pnpm add next-swr
yarn add next-swr
bun add next-swr
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0-canary.0 |
| Published | 2024-02-06 |
| First published | 2023-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | aprendendofelipe |
| Maintainers | aprendendofelipeuser |
| Keywords | cache, fetch, next, request, revalidate, swr |

## Links

- npm: https://www.npmjs.com/package/next-swr
- Repository: https://github.com/aprendendofelipe/next-swr
- Homepage: https://github.com/aprendendofelipe/next-swr#readme
- Issues: https://github.com/aprendendofelipe/next-swr/issues
- npm.io page: https://npm.io/package/next-swr

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.2.0-canary.0 (latest) — 2024-02-06
- 0.1.2-canary.2 — 2023-06-13
- 0.1.2-canary.0 — 2023-04-20
- 0.1.1 — 2023-04-16

## README

# Revalidate stale data in Next.js

Inspired by [Vercel/swr](https://www.npmjs.com/package/swr), but no API needed, as it revalidates data through static pages.

Only one api call per session is needed to synchronize local and remote clocks. We recommend using the middleware.

# Quickstart

## Install

```
  npm i next-swr
```

## Usage

```js
// _app file
import { RevalidateProvider } from 'next-swr';

function App({ Component, pageProps }) {
  const swrConfig = pageProps.swr;

  return (
    <RevalidateProvider swr={swrConfig}>
      <Component {...pageProps} />
    </RevalidateProvider>
  );
}
```

```js
// middleware
import clock from 'next-swr/clock';

export const config = { matcher: ['/swr', '/others-paths'] };

export const middleware = clock(optionalMiddlewareFunction);
```

```js
// page files
import { getStaticPropsRevalidate } from 'next-swr'

function Page({ data }) {
  return <Component {...data} />
}

export const getStaticProps = getStaticPropsRevalidate(async (ctx) => {
  // get data...
  return {
    props: { data },
    revalidate: 10
  }
)
```

```js
// Optimistic component files
import { useRevalidate } from 'next-swr';

function Component(props) {
  const [state, setState] = useRevalidate(props.state);

  return (
    <div>
      <h1>{state}</h1>
      <button
        onClick={async () => {
          const newState = await getOrUpdateState();
          setState(newState);
        }}
      >
        Use most current state
      </button>
    </div>
  );
}
```

## Parameters

- `swr`: an object of options for next-swr

### Custom config per page

```js
export const getStaticProps = getStaticPropsRevalidate(async () => {
  // get data...
  return {
    props: { data },
    swr: {
      revalidate_f: 1,
      refreshInterval: 30_000,
      revalidateOnFocus: false,
    },
  };
});
```

## Options

- `revalidateIfStale = true`: revalidate only if there is stale data
- `revalidateOnMount = true`: enable or disable first automatic revalidation when page is mounted
- `revalidateOnFocus = true`: automatically revalidate when window gets focused
- `refreshInterval`:
  - Disabled by default: `refreshInterval = 0`
  - If set to a number, polling interval in milliseconds.
  - If set to a function, the function will receive the latest props and should return the interval in milliseconds.
- `dedupingInterval`: dedupe revalidate at least this time interval in milliseconds. Default is the elapsed time in the previous revalidation
- `revalidate_f`: sets a fixed revalidate on `getStaticProps`. The default is automatic, being `revalidate` plus the elapsed time in the previous revalidation
- `swrPath`: sets the endpoint to return the server time to synchronize expiration. Default is `/swr` which can be provided by `next-swr/clock`

## License

The MIT License.

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