Revalidate stale data in Next.js
npm install next-swrInspired 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.
``
npm i next-swr
`js
// _app file
import { RevalidateProvider } from 'next-swr';
function App({ Component, pageProps }) {
const swrConfig = pageProps.swr;
return (
);
}
`
`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
}
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 (
Parameters
-
: an object of options for next-swr$3
`js
export const getStaticProps = getStaticPropsRevalidate(async () => {
// get data...
return {
props: { data },
swr: {
revalidate_f: 1,
refreshInterval: 30_000,
revalidateOnFocus: false,
},
};
});
`Options
-
: 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.
- : 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`The MIT License.