Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bmstefanski/next-cache-effective-pages
A helper for creating cache-effective server-side-rendered Next.js pages with minimal effort
https://github.com/bmstefanski/next-cache-effective-pages
nextjs nextjs-plugin
Last synced: about 2 months ago
JSON representation
A helper for creating cache-effective server-side-rendered Next.js pages with minimal effort
- Host: GitHub
- URL: https://github.com/bmstefanski/next-cache-effective-pages
- Owner: bmstefanski
- License: mit
- Created: 2021-08-10T12:23:59.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T01:21:05.000Z (about 3 years ago)
- Last Synced: 2024-07-26T05:32:46.814Z (2 months ago)
- Topics: nextjs, nextjs-plugin
- Language: TypeScript
- Homepage: https://next-cache-effective-pages.vercel.app/test.txt?userId=42
- Size: 380 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-NextJs - next-cache-effective-pages - [demo](https://next-cache-effective-pages.vercel.app/test.txt?userId=42) (Nextjs Starter)
README
Next.js cache-effective pages
## What it does
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.
## Features
- [x] 🙉 Effective caching
- [x] 🚚 Bandwidth attack proofed
- [x] 🤠 Simple and flexible API
- [x] 🐄 No dependencies
## Installation
```
$ npm i --save next-cache-effective-pages
# or
$ yarn add next-cache-effective-pages
```
## Example use cases
### Sitemap
```typescript
// 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
}
```
### Sitemap with pagination
```typescript
// 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
}
```
## Options
```typescript
{
secondsBeforeRevalidation?: number; # Self-descriptive
allowedQueryParams?: string[]; # These won't be removed from the url while redirecting
}
```
## FAQ
### How does it prevent bandwidth attacks?
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`)
### How are you caching this?
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.