Revalidate stale data in Next.js
Inspired by Vercel/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
// _app file
import { RevalidateProvider } from 'next-swr';
function App({ Component, pageProps }) {
const swrConfig = pageProps.swr;
return (
<RevalidateProvider swr={swrConfig}>
<Component {...pageProps} />
</RevalidateProvider>
);
}// middleware
import clock from 'next-swr/clock';
export const config = { matcher: ['/swr', '/others-paths'] };
export const middleware = clock(optionalMiddlewareFunction);// 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
}
)// 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
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.
- Disabled by default:
-
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 ongetStaticProps. The default is automatic, beingrevalidateplus the elapsed time in the previous revalidation -
swrPath: sets the endpoint to return the server time to synchronize expiration. Default is/swrwhich can be provided bynext-swr/clock
License
The MIT License.