Let's say you want to re-generate a static file (e.g. public/sitemap.xml) every 15 minutes.
The first solution that comes to mind is doing this at build time and it's great and simple, but.... it wouldn't work for mid and big-scale applications (considering that you're rebuilding your app every time there's a change in CMS).
And this is where next-cache-effective-pages
comes into the picture.
It makes it easier to change your static file into a regeneratable page without you worrying about effective caching and bandwidth attacks.
- ๐ Effective caching
- ๐ Bandwidth attack proofed
- ๐ค Simple and flexible API
- ๐ No dependencies
$ npm i --save next-cache-effective-pages
# or
$ yarn add next-cache-effective-pages
// pages/sitemap.xml.js
export default function Sitemap() {}
export async function getServerSideProps(ctxt) {
return withCacheEffectivePage(async ({ res }) => {
res.setHeader('Content-Type', 'text/xml')
res.write(await getAllPosts())
res.end()
})({ ...ctxt, options: { secondsBeforeRevalidation: 60 * 15 } }) // Re-generate the page every 15 minutes
}
// pages/sitemap.xml.js
export default function Sitemap() {}
export async function getServerSideProps(ctxt) {
return withCacheEffectivePage(async ({ res, query }) => {
const maxPages = await getMaxPages()
if (query.page > maxPages) {
// redirect to last
}
res.setHeader('Content-Type', 'text/xml')
res.write(await getPostsByPage(query.page))
res.end()
})({ ...ctxt, options: { secondsBeforeRevalidation: 60 * 15, allowedQueryParams: ['page'] } }) // You can whitelist a query parameter
}
{
secondsBeforeRevalidation?: number; # Self-descriptive
allowedQueryParams?: string[]; # These won't be removed from the url while redirecting
}
The easiest way to attack an app's bandwidth quota is by adding the current timestamp to a request, like so:
$ curl -s -I -X GET "https://bstefanski.com/sitemap.xml?$(date +%s)"
If your site is server-side rendered it will probably miss the cached entry and create a new one.
This library prevents from returning an uncached big chunk of data by redirecting to a query-less url (https://bstefanski.com/sitemap.xml?43534543=0
-> https://bstefanski.com/sitemap.xml
)
By setting Cache-Control
header to s-maxage=${secondsBeforeRevalidation}, stale-while-revalidate
.
stale-while-revalidate
- Indicates the client will accept a stale response, while asynchronously checking in the background for a fresh one.