Stale-while-revalidate and it's usage with Next.js
/ 2 min read
Stale while revalidate (SWR) is an established pattern for quick data display while refreshing data in the background. It is popularised by SWR library https://www.npmjs.com/package/swr, but it roots comes from HTTP spec
Example:
This pattern fits well for content that doesn’t update often like blogs, static pages, etc.
SWR in Next.js
Next.js promotes ISR, which is an alternative to SWR. SWR is not supported in Vercel CDN, and this is the reason you might want to pull out from Vercel.
Next.js itself requires some configuration.
SWR delta
To make SWR work in Next.js, you’d need to specify swrDelta
in next.config.js, which is available from next@14
This is the value, for how long does server considers the content stale and responds immediately to it. It is a common pattern to have this value high (ie 1 year), so at any point, we can react quickly and prefetch the latest content in the background.
It’s essentially our stale-while-revalidate
value in seconds.
Max-age
This value specifies how long the server would respond without even checking the origin server.
In next.js, it is set via the revalidate
constant, as with ISR.
It’s essentially our max-age
value in seconds.
As you can’t modify cache-control
in next.js, this is the only way to set the value.
This value is relatively short 1 hour to 1 day, depending on how active development is - in case of new features or bugfixes you still want to deliver quickly and propagate the changes.
With stale-while-revalidate
you can afford not to invalidate the CDN cache on redeploy! After redeploying, your changes will propagate in max-age
time (ie 1hr).
Boosting with CDN
As abovementioned, Vercel doesn’t support SWR, so there are some popular alternatives:
Fastly: supports SWR ✅ https://www.fastly.com/blog/stale-while-revalidate-stale-if-error-available-today/
Cloudflare doesn’t support SWR ❌ https://community.cloudflare.com/t/support-for-stale-while-revalidate/496788
Cloudfront: supports since 2023 ✅ https://aws.amazon.com/about-aws/whats-new/2023/05/amazon-cloudfront-stale-while-revalidate-stale-if-error-cache-control-directives/
Example on Cloudfront
No setup is required, as CDN either recognizes headers from origin or not and just respects the instructions in cache control.
Let’s check now the first visit and response from Cloudfront:
Subsequent visit:
Visit when content is considered stale:
With RefreshHit
Cloudfront responds immediately and makes call to the origin server asynchronously.