caching

65 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Custom cache handler for self-hosted Next.js

To configure the cache location when self-hosting, you can configure a custom handler in next.config.js. By default, generated cache assets are stored in memory (defaults to 50mb) and on disk. On ephemeral compute platforms, local disk is often non-persistent or unavailable, making the cache short-lived and per-instance. In Kubernetes, each pod has its own copy of the cache. You can disable in-memory caching by setting cacheMaxMemorySize to 0 and provide a custom handler.

Custom cache handler example implementation

Example custom cache handler for Next.js: ```jsx const cache = new Map() module.exports = class CacheHandler { constructor(options) { this.options = options } async get(key) { return cache.get(key) } async set(key, data, ctx) { cache.set(key, { value: data, lastModified: Date.now(), tags: ctx.tags, }) } async revalidateTag(tags) { tags = [tags].flat() for (let [key, value] of cache) { if (value.tags.some((tag) => tags.includes(tag))) { cache.delete(key) } } } resetRequestCache() {} } ``` Configure it in next.config.js: ```jsx module.exports = { cacheHandler: require.resolve('./cache-handler.js'), cacheMaxMemorySize: 0, } ``` This shows the methods: get(key), set(key, data, ctx), revalidateTag(tags), and resetRequestCache(). The cached values can be stored anywhere, including Redis or AWS S3.

Multi-instance cache tag coordination with refreshTags

App Router deployments with multiple instances need cache tag coordination. By default, calling revalidateTag() on one instance only invalidates the cache on that instance. Other instances continue serving stale content until they independently discover the invalidation. To coordinate tag invalidation across instances, implement the refreshTags() method in your custom cache handler. This method is called before each request and should sync tag state from shared storage like Redis so all instances learn about invalidations promptly.

revalidatePath convenience layer on cache tags

revalidatePath is a convenience layer on top of cache tags. Calling revalidatePath will call the revalidateTag function with a special default tag for the provided page.

CDN caching with dynamic and static pages

When using a CDN in front of your Next.js application, the page will include 'Cache-Control: private' response header when dynamic APIs are accessed, ensuring the resulting HTML page is marked as non-cacheable. If the page is fully prerendered to static, it will include 'Cache-Control: public' to allow the page to be cached on the CDN. If you don't need a mix of both static and dynamic components, you can make your entire route static and cache the output HTML on a CDN.

Give your agent this brain