diff --git a/README.md b/README.md index 6442883..3a77505 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,31 @@ # @fortedigital/nextjs-cache-handler A caching utility built originally on top of [`@neshca/cache-handler`](https://www.npmjs.com/package/@neshca/cache-handler), providing additional cache handlers for specialized use cases with a focus on Redis-based caching. -Starting from version `2.0.0`, this package no longer depends on `@neshca/cache-handler` and is fully maintained and compatible with Next.js 15 and onwards. + +Starting from version `2.0.0`, this package no longer depends on `@neshca/cache-handler` and is fully maintained and compatible with Next.js 15 and partially 16. See the [compatibility matrix](#feature-compatibility-matrix) for detailed feature support. + +## Table of Contents + +- [Documentation](#documentation) +- [Migration](#migration) +- [Prerequisites](#prerequisites) +- [Installation](#installation) +- [Quick Start](#quick-start) +- [Next.js Compatibility](#nextjs-compatibility) + - [Feature Compatibility Matrix](#feature-compatibility-matrix) +- [Migration](#migration) + - [Swapping from @neshca/cache-handler](#swapping-from-neshcacache-handler) +- [Handlers](#handlers) + - [redis-strings](#redis-strings) + - [local-lru](#local-lru) + - [composite](#composite) +- [Examples](#examples) +- [Reference to Original Package](#reference-to-original-package) +- [API Reference Links](#api-reference-links) +- [Troubleshooting](#troubleshooting) +- [Legacy / Deprecated](#legacy--deprecated) +- [Contributing](#contributing) +- [License](#license) ## Documentation @@ -14,21 +38,6 @@ The documentation at [@neshca/cache-handler - caching-tools.github.io/next-share - [1.x.x → ^2.x.x](https://github.com/fortedigital/nextjs-cache-handler/blob/master/docs/migration/1_x_x__2_x_x.md) - [1.2.x -> ^1.3.x](https://github.com/fortedigital/nextjs-cache-handler/blob/master/docs/migration/1_2_x__1_3_x.md) -## Installation - -`npm i @fortedigital/nextjs-cache-handler` - -If upgrading from Next 14 or earlier, **flush your Redis cache** before running new version of the application locally and on your hosted environments. **Cache formats between Next 14 and 15 are incompatible**. - -## Next 15 Support - -The original `@neshca/cache-handler` package does not support Next.js 15. - -Prior to 2.0.0, this package provided wrappers and enhancements to allow using `@neshca/cache-handler` with Next.js 15. -From version 2.0.0 onward, `@fortedigital/nextjs-cache-handler` is a standalone solution with no dependency on `@neshca/cache-handler` and is fully compatible with Next.js 15 and [redis 5](https://www.npmjs.com/package/redis). - -We aim to keep up with new Next.js releases and will introduce major changes with appropriate version bumps. - ### Swapping from `@neshca/cache-handler` If you already use `@neshca/cache-handler` the setup is very streamlined and you just need to replace package references. If you're starting fresh please check [the example project](./examples/redis-minimal). @@ -99,17 +108,125 @@ export async function register() { } ``` +## Prerequisites + +Before installing, ensure you have: + +- **Node.js** >= 22.0.0 +- **Next.js** >= 15.2.4 (for version 2.0.0+) or >= 16.0.0 (for version 3.0.0+) +- **Redis** >= 5.5.6 (or compatible Redis-compatible service) +- **pnpm** >= 9.0.0 (for development) + +> **Important:** This package only supports the official [`redis`](https://github.com/redis/node-redis) package (also known as `node-redis`). The `ioredis` package is **not supported**. + +See [Version Requirements](#version-requirements) for package version compatibility. + +## Installation + +`npm i @fortedigital/nextjs-cache-handler` + +If upgrading from Next 14 or earlier, **flush your Redis cache** before running new version of the application locally and on your hosted environments. **Cache formats between Next 14 and 15 are incompatible**. + +## Quick Start + +Here's a minimal setup to get started: + +```js +// cache-handler.mjs +import { CacheHandler } from "@fortedigital/nextjs-cache-handler"; +import createRedisHandler from "@fortedigital/nextjs-cache-handler/redis-strings"; +import { createClient } from "redis"; + +const client = createClient({ url: process.env.REDIS_URL }); +await client.connect(); + +CacheHandler.onCreation(() => ({ + handlers: [createRedisHandler({ client })], +})); + +export default CacheHandler; +``` + +Then configure it in your `next.config.js`: + +```js +// next.config.js +module.exports = { + cacheHandler: require.resolve("./cache-handler.mjs"), +}; +``` + +For a complete example with error handling, fallbacks, and production setup, see the [Examples](#examples) section below. The quick start code is not meant for production use. + +## Next.js Compatibility + +The original `@neshca/cache-handler` package does not support Next.js 15. + +Prior to 2.0.0, this package provided wrappers and enhancements to allow using `@neshca/cache-handler` with Next.js 15. +From version 2.0.0 onward, `@fortedigital/nextjs-cache-handler` is a standalone solution with no dependency on `@neshca/cache-handler` and is fully compatible with Next.js 15 and [redis 5](https://www.npmjs.com/package/redis). + + + +**Version Requirements:** + +- **Next.js 15**: Version 2.0.0+ (version 3.0.0+ recommended for latest improvements and maintenance development) +- **Next.js 16**: Version 3.0.0+ required + +We aim to keep up with new Next.js releases and will introduce major changes with appropriate version bumps. + +### Feature Compatibility Matrix + +| Feature | Next.js 15 | Next.js 16 | Notes | +| ---------------------------------------------------- | ---------- | ---------- | ---------------------------------------------------- | +| **Fetch API Caching** | +| `fetch` with default cache (`force-cache`) | ✅ | ✅ | Default behavior, caches indefinitely | +| `fetch` with `no-store` | ✅ | ✅ | Never caches, always fresh | +| `fetch` with `no-cache` | ✅ | ✅ | Validates cache on each request | +| `fetch` with `next.revalidate` | ✅ | ✅ | Time-based revalidation | +| `fetch` with `next.tags` | ✅ | ✅ | Tag-based cache invalidation | +| **Cache Invalidation** | +| `revalidateTag(tag)` | ✅ | N/A | Breaking change in Next.js 16 | +| `revalidateTag(tag, cacheLife)` | N/A | ✅ | New required API in Next.js 16 | +| `updateTag(tag)` | N/A | ✅ | New API for immediate invalidation in Server Actions | +| `revalidatePath(path)` | ✅ | ✅ | Path-based revalidation | +| `revalidatePath(path, type)` | ✅ | ✅ | Type-specific path revalidation | +| **Function Caching** | +| `unstable_cache()` | ✅ | ✅ | Cache any function with tags and revalidation | +| **Static Generation** | +| `generateStaticParams()` | ✅ | ✅ | Static params generation | +| ISR (Incremental Static Regeneration) | ✅ | ✅ | On-demand regeneration | +| Route segment config (`revalidate`, `dynamic`, etc.) | ✅ | ✅ | All segment config options | +| **Redis Client Support** | +| `redis` package (node-redis) | ✅ | ✅ | Official Redis client - fully supported | +| `ioredis` package | ❌ | ❌ | Not yet supported - use `redis` package instead | +| **Next.js 16 New Features** | +| `cacheHandlers` config (for `'use cache'`) | ❌ | ❌ | Not yet supported - Planned for Next 16 | +| `'use cache'` directive | ❌ | ❌ | Not yet supported - Planned for Next 16 | +| `'use cache: remote'` directive | ❌ | ❌ | Not yet supported - Planned for Next 16 | +| `'use cache: private'` directive | ❌ | ❌ | Not yet supported - Planned for Next 16 | +| `cacheComponents` | ❌ | ❌ | Not yet supported - Planned for Next 16 | + +**Notes:** + +- `revalidateTag()` in Next.js 16 requires a `cacheLife` parameter (`'max'`, `'hours'`, or `'days'`). This is a breaking change from Next.js 15. +- `cacheLife` profiles are primarily designed for Vercel's infrastructure. Custom cache handlers may not fully differentiate between different `cacheLife` profiles. +- `updateTag()` is only available in Server Actions, not Route Handlers. +- The new `cacheHandlers` API and `'use cache'` directives are not yet supported by this package. + ## Handlers ### `redis-strings` A Redis-based handler for key- and tag-based caching. Compared to the original implementation, it prevents memory leaks caused by growing shared tag maps by implementing TTL-bound hashmaps. +> **Note:** This handler requires the official [`redis`](https://github.com/redis/node-redis) package. `ioredis` is not supported. + **Features:** - Key expiration using `EXAT` or `EXPIREAT` - Tag-based revalidation - Automatic TTL management +- Automatic buffer/string conversion for Next.js 15+ compatibility (previously required `buffer-string-decorator` in version 1.x.x) - Default `revalidateTagQuerySize`: `10_000` (safe for large caches) ```js @@ -203,37 +320,34 @@ const compositeHandler = createCompositeHandler({ }); ``` -### ⚠️ `buffer-string-decorator` | **REMOVED IN 2.0.0!** - integrated into the core package - -#### Features: +## Examples -This cache handler converts buffers from cached route values to strings on save and back to buffers on read. +### Example Project -Next 15 decided to change types of some properties from String to Buffer which conflicts with how data is serialized to redis. It is recommended to use this handler with `redis-strings` in Next 15 as this handler make the following adjustment. +The [example project](./examples/redis-minimal) provides a comprehensive demonstration of Next.js caching features with interactive examples: -- **Converts `body` `Buffer` to `string`** - See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L97 -- **Converts `rscData` `string` to `Buffer`** - See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L76 -- **Converts `segmentData` `Record` to `Map`** - See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L80 +- **Default Cache** - Demonstrates `force-cache` behavior +- **No Store** - Shows `no-store` for always-fresh data +- **Time-based Revalidation** - Automatic cache revalidation +- **Fetch with Tags** - Tag-based cache invalidation +- **unstable_cache** - Function caching with tags +- **ISR** - Incremental Static Regeneration +- **Static Params** - Dynamic route static generation -```js -import createBufferStringDecoratorHandler from "@fortedigital/nextjs-cache-handler/buffer-string-decorator"; +To run the examples: -const bufferStringDecorator = - createBufferStringDecoratorHandler(redisCacheHandler); +```bash +pnpm install +cd examples/redis-minimal +npm run build +npm run start ``` -## Examples - -### 2.x.x - -#### Full example +> **Note:** Caching only works in production mode. See the [examples README](./examples/redis-minimal/README.md) for more details. -[Example project](./examples/redis-minimal) +### Production Setup Example -#### Example `cache-handler.js`. +Here's a complete production-ready `cache-handler.js` example: ```js import { createClient } from "redis"; @@ -344,234 +458,168 @@ CacheHandler.onCreation(() => { export default CacheHandler; ``` -### 1.x.x +--- -```js -// @neshca/cache-handler dependencies -import { CacheHandler } from "@neshca/cache-handler"; -import createLruHandler from "@neshca/cache-handler/local-lru"; +## Reference to Original Package -// Next/Redis dependencies -import { createClient } from "redis"; -import { PHASE_PRODUCTION_BUILD } from "next/constants"; +This project was originally based on [`@neshca/cache-handler`](https://www.npmjs.com/package/@neshca/cache-handler). Versions prior to `2.0.0` wrapped or extended the original. As of `2.0.0`, this project is fully independent and no longer uses or requires `@neshca/cache-handler`. -// @fortedigital/nextjs-cache-handler dependencies -import createCompositeHandler from "@fortedigital/nextjs-cache-handler/composite"; -import createRedisHandler from "@fortedigital/nextjs-cache-handler/redis-strings"; -import createBufferStringHandler from "@fortedigital/nextjs-cache-handler/buffer-string-decorator"; -import { Next15CacheHandler } from "@fortedigital/nextjs-cache-handler"; +For context or historical documentation, you may still reference the [original project](https://caching-tools.github.io/next-shared-cache). -// Usual onCreation from @neshca/cache-handler -CacheHandler.onCreation(() => { - // Important - It's recommended to use global scope to ensure only one Redis connection is made - // This ensures only one instance get created - if (global.cacheHandlerConfig) { - return global.cacheHandlerConfig; - } +## API Reference Links - // Important - It's recommended to use global scope to ensure only one Redis connection is made - // This ensures new instances are not created in a race condition - if (global.cacheHandlerConfigPromise) { - return global.cacheHandlerConfigPromise; - } +### Next.js Documentation - // You may need to ignore Redis locally, remove this block otherwise - if (process.env.NODE_ENV === "development") { - const lruCache = createLruHandler(); - return { handlers: [lruCache] }; - } +- [Caching in Next.js](https://nextjs.org/docs/app/building-your-application/caching) - Comprehensive guide to Next.js caching +- [Data Fetching, Caching, and Revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching) - Fetch API caching options +- [`fetch` API](https://nextjs.org/docs/app/api-reference/functions/fetch) - Next.js fetch options (`next.revalidate`, `next.tags`) +- [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag) - Tag-based cache invalidation +- [`revalidatePath`](https://nextjs.org/docs/app/api-reference/functions/revalidatePath) - Path-based cache invalidation +- [`updateTag`](https://nextjs.org/docs/app/api-reference/functions/updateTag) - Immediate cache invalidation (Next.js 16) +- [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) - Function caching +- [Route Segment Config](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config) - `revalidate`, `dynamic`, etc. +- [Incremental Static Regeneration](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) - ISR documentation - // Main promise initializing the handler - global.cacheHandlerConfigPromise = (async () => { - /** @type {import("redis").RedisClientType | null} */ - let redisClient = null; - if (PHASE_PRODUCTION_BUILD !== process.env.NEXT_PHASE) { - const settings = { - url: process.env.REDIS_URL, // Make sure you configure this variable - pingInterval: 10000, - }; +### Redis Documentation - // This is optional and needed only if you use access keys - if (process.env.REDIS_ACCESS_KEY) { - settings.password = process.env.REDIS_ACCESS_KEY; - } +- [Redis Client for Node.js](https://github.com/redis/node-redis) - Official Redis client library +- [Redis Documentation](https://redis.io/docs/) - Redis server documentation +- [Redis Commands](https://redis.io/commands/) - Redis command reference - try { - redisClient = createClient(settings); - redisClient.on("error", (e) => { - if (typeof process.env.NEXT_PRIVATE_DEBUG_CACHE !== "undefined") { - console.warn("Redis error", e); - } - global.cacheHandlerConfig = null; - global.cacheHandlerConfigPromise = null; - }); - } catch (error) { - console.warn("Failed to create Redis client:", error); - } - } +## Troubleshooting - if (redisClient) { - try { - console.info("Connecting Redis client..."); - await redisClient.connect(); - console.info("Redis client connected."); - } catch (error) { - console.warn("Failed to connect Redis client:", error); - await redisClient - .disconnect() - .catch(() => - console.warn( - "Failed to quit the Redis client after failing to connect." - ) - ); - } - } - const lruCache = createLruHandler(); +### Cache not working in development mode - if (!redisClient?.isReady) { - console.error("Failed to initialize caching layer."); - global.cacheHandlerConfigPromise = null; - global.cacheHandlerConfig = { handlers: [lruCache] }; - return global.cacheHandlerConfig; - } - - const redisCacheHandler = createRedisHandler({ - client: redisClient, - keyPrefix: "nextjs:", - }); - - global.cacheHandlerConfigPromise = null; - - // This example uses composite handler to switch from Redis to LRU cache if tags contains `memory-cache` tag. - // You can skip composite and use Redis or LRU only. - global.cacheHandlerConfig = { - handlers: [ - createCompositeHandler({ - handlers: [ - lruCache, - createBufferStringHandler(redisCacheHandler), // Use `createBufferStringHandler` in Next15 and ignore it in Next14 or below - ], - setStrategy: (ctx) => (ctx?.tags.includes("memory-cache") ? 0 : 1), // You can adjust strategy for deciding which cache should the composite use - }), - ], - }; +**Issue:** Caching doesn't seem to work when running `npm run dev`. - return global.cacheHandlerConfig; - })(); - - return global.cacheHandlerConfigPromise; -}); +**Solution:** This is expected behavior. Next.js intentionally disables caching in development mode for faster hot reloading. To test caching functionality, you must use production mode: -export default CacheHandler; +```bash +npm run build +npm run start ``` ---- +### Redis connection errors -## Reference to Original Package +**Issue:** Getting connection errors or "Redis client is not ready" errors. -This project was originally based on [`@neshca/cache-handler`](https://www.npmjs.com/package/@neshca/cache-handler). Versions prior to `2.0.0` wrapped or extended the original. As of `2.0.0`, this project is fully independent and no longer uses or requires `@neshca/cache-handler`. +**Solutions:** -For context or historical documentation, you may still reference the [original project](https://caching-tools.github.io/next-shared-cache). +- Verify Redis is running: `redis-cli ping` should return `PONG` +- Check `REDIS_URL` environment variable is set correctly +- Ensure Redis is accessible from your application (check firewall/network settings) +- For production, verify Redis credentials and connection string format +- Check Redis logs for connection issues -## neshClassicCache +### Cache not invalidating after revalidateTag -⚠️ Deprecated: This function was migrated from @neshca for compatibility purposes only. Use with caution - no further development or support is planned. +**Issue:** Calling `revalidateTag()` doesn't seem to clear the cache. -`neshClassicCache` allows you to cache the results of expensive operations, like database queries, and reuse them across multiple requests. Unlike the [`neshCache`](/functions/nesh-cache) or [`unstable_cache` ↗](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) function, `neshClassicCache` must be used in a Next.js Pages Router allowing users to cache data in the `getServerSideProps` and API routes. +**Solutions:** +- In Next.js 16, ensure you're using `revalidateTag(tag, cacheLife)` with the required `cacheLife` parameter +- Verify the tag matches exactly (tags are case-sensitive) +- Check that the cache entry was created with the same tag +- In development mode, caching is disabled - test in production mode -> [!NOTE] -> -> Cache entries created with `neshClassicCache` can be revalidated only by the [`revalidateTag` ↗](https://nextjs.org/docs/app/api-reference/functions/revalidateTag) method. +### Migration from Next.js 14 -### Parameters +**Issue:** Errors after upgrading from Next.js 14 to 15/16. -#### `fetchData` +**Solution:** Cache formats between Next.js 14 and 15 are incompatible. **You must flush your Redis cache** before running the new version: -This is an asynchronous function that fetches the data you want to cache. It must be a function that returns a `Promise`. +```bash +redis-cli FLUSHALL +``` -#### `commonOptions` +Or if using a specific database: -This is an object that controls how the cache behaves. It can contain the following properties: +```bash +redis-cli -n FLUSHDB +``` -- `tags` - An array of tags to associate with the cached result. Tags are used to revalidate the cache using the `revalidateTag` and `revalidatePath` functions. +### Version compatibility issues -- `revalidate` - The revalidation interval in seconds. Must be a positive integer or `false` to disable revalidation. Defaults to `export const revalidate = time;` in the current route. +**Issue:** Package version doesn't work with your Next.js version. -- `argumentsSerializer` - A function that serializes the arguments passed to the callback function. Use it to create a cache key. Defaults to `JSON.stringify(args)`. +**Solutions:** -- `resultSerializer` - A function that serializes the result of the callback function.Defaults to `Buffer.from(JSON.stringify(data)).toString('base64')`. +- Next.js 15: Use version 2.0.0+ (3.0.0+ recommended) +- Next.js 16: Use version 3.0.0+ (required) +- Check the [Version Requirements](#version-requirements) section +- Verify your Node.js version is >= 22.0.0 -- `resultDeserializer` - A function that deserializes the string representation of the result of the callback function. Defaults to `JSON.parse(Buffer.from(data, 'base64').toString('utf-8'))`. +### Debugging cache behavior -- `responseContext` - The response context object. If provided, it is used to set the cache headers acoording to the `revalidate` option. Defaults to `undefined`. +**Issue:** Need to debug what's happening with the cache. -### Returns +**Solution:** Enable debug logging by setting the environment variable: -`neshClassicCache` returns a function that when invoked, returns a `Promise` that resolves to the cached data. If the data is not in the cache, the provided function will be invoked, and its result will be cached and returned. The first argument is the `options` which can be used to override the common [`options`](/functions/nesh-classic-cache#commonoptions). In addition, there is a `cacheKey` option that can be used to provide a custom cache key. +```bash +NEXT_PRIVATE_DEBUG_CACHE=1 npm run start +``` -### Example +This will output detailed cache operation logs to help diagnose issues. -```jsx filename="src/pages/api/api-example.js" copy -import { neshClassicCache } from '@fortedigital/nextjs-cache-handler/functions'; -import axios from 'axios'; +## Contributing -export const config = { - runtime: 'nodejs', -}; +This project uses [Turborepo](https://turbo.build/repo) to manage the monorepo structure with the main package and examples. -async function getViaAxios(url) { - try { - return (await axios.get(url.href)).data; - } catch (_error) { - return null; - } -} +### Prerequisites -const cachedAxios = neshClassicCache(getViaAxios); +- Node.js >= 22.0.0 +- pnpm >= 9.0.0 -export default async function handler(request, response) { - if (request.method !== 'GET') { - return response.status(405).send(null); - } +### Development Workflow - const revalidate = 5; +- **Start dev server**: `pnpm dev` (runs all dev servers in parallel) +- **Run all tests**: `pnpm test` - const url = new URL('https://api.example.com/data.json'); +--- - // Add tags to be able to revalidate the cache - const data = await cachedAxios( - { revalidate, tags: [url.pathname], responseContext: response }, - url, - ); +## Legacy / Deprecated - if (!data) { - response.status(404).send('Not found'); +### neshClassicCache - return; - } +⚠️ **Deprecated:** This function was migrated from @neshca for compatibility purposes only. Use with caution - no further development or support is planned. - response.json(data); -} -``` +**Migration:** Use [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) instead, which provides similar functionality with better Next.js integration. ---- +`neshClassicCache` allows you to cache the results of expensive operations, like database queries, and reuse them across multiple requests. Unlike the [`neshCache`](/functions/nesh-cache) or [`unstable_cache` ↗](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) function, `neshClassicCache` must be used in a Next.js Pages Router allowing users to cache data in the `getServerSideProps` and API routes. -## Contributing +> [!NOTE] +> +> Cache entries created with `neshClassicCache` can be revalidated only by the [`revalidateTag` ↗](https://nextjs.org/docs/app/api-reference/functions/revalidateTag) method. -This project uses [Turborepo](https://turbo.build/repo) to manage the monorepo structure with the main package and examples. +#### Parameters -### Prerequisites +- `fetchData` - An asynchronous function that fetches the data you want to cache. It must be a function that returns a `Promise`. +- `commonOptions` - An object that controls how the cache behaves: + - `tags` - An array of tags to associate with the cached result + - `revalidate` - The revalidation interval in seconds + - `argumentsSerializer` - Function to serialize arguments (defaults to `JSON.stringify`) + - `resultSerializer` - Function to serialize results + - `resultDeserializer` - Function to deserialize results + - `responseContext` - The response context object -- Node.js >= 22.0.0 -- pnpm >= 9.0.0 +#### Example -### Development Workflow +```jsx filename="src/pages/api/api-example.js" +import { neshClassicCache } from "@fortedigital/nextjs-cache-handler/functions"; +import axios from "axios"; -- **Start dev server**: `pnpm dev` (runs all dev servers in parallel) -- **Run all tests**: `pnpm test` +const cachedAxios = neshClassicCache(async (url) => { + return (await axios.get(url.href)).data; +}); ---- +export default async function handler(request, response) { + const data = await cachedAxios( + { revalidate: 5, tags: ["api-data"], responseContext: response }, + new URL("https://api.example.com/data.json") + ); + response.json(data); +} +``` ## License diff --git a/examples/redis-minimal/.env b/examples/redis-minimal/.env index 6d77175..c2cfccc 100644 --- a/examples/redis-minimal/.env +++ b/examples/redis-minimal/.env @@ -1,3 +1,3 @@ NEXT_PRIVATE_DEBUG_CACHE="1" REDIS_URL="redis://localhost:6379" -REDIS_SINGLE_CONNECTION=true \ No newline at end of file +REDIS_SINGLE_CONNECTION=false \ No newline at end of file diff --git a/examples/redis-minimal/README.md b/examples/redis-minimal/README.md index eae937b..480e467 100644 --- a/examples/redis-minimal/README.md +++ b/examples/redis-minimal/README.md @@ -1,32 +1,248 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Next.js Cache Handler Examples + +This example application demonstrates various Next.js caching functionalities using the Redis cache handler. It provides a comprehensive UI to explore and test different caching strategies. ## Getting Started -First, run the development server: +First, install dependencies: ```bash npm i -npm run dev ``` -Or run build and run production server: +### Important: Development vs Production Mode + +**Next.js does not use the cache handler in development mode.** This is a Next.js limitation - caching is intentionally disabled in dev mode for faster hot reloading and to ensure developers always see fresh data. + +To test caching functionality, you must use **production mode**: ```bash -npm i npm run build npm run start ``` +For development (without caching): + +```bash +npm run dev +``` + Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -Modify `.env` file if you need to. +## Configuration + +Modify the `.env` file if you need to configure Redis connection settings. The default Redis URL is used if not specified. ## Examples -- http://localhost:3000 -- http://localhost:3000/fetch-example -- http://localhost:3000/static-params-test/cache +The application includes several examples demonstrating different Next.js caching features: + +### 1. Home Page (`/`) + +Overview page listing all available examples with descriptions and features. + +### 2. Default Cache (`/examples/default-cache`) + +Demonstrates the default fetch caching behavior with `force-cache`. + +**Features:** + +- Default caching behavior (indefinite cache duration) +- Perfect for static or rarely-changing data +- Shows how Next.js caches by default + +**Try it:** + +- Visit `/examples/default-cache` to see cached data +- The timestamp will remain the same on subsequent requests +- Data is cached until manually cleared or build is redeployed + +### 3. No Store (`/examples/no-store`) + +Shows fetch with `no-store` option, which always fetches fresh data. + +**Features:** + +- Never caches responses +- Always fetches fresh data from API +- Perfect for real-time or user-specific data +- Timestamp changes on every request + +**Try it:** + +- Visit `/examples/no-store` to see fresh data on every load +- Refresh the page multiple times - timestamp changes each time +- Compare with other caching strategies + +### 4. Time-based Revalidation (`/examples/time-based-revalidation`) + +Shows fetch with time-based revalidation (standalone, without tags). + +**Features:** + +- Automatic revalidation after specified time (30 seconds) +- Balances freshness with performance +- Standalone example of `next.revalidate` + +**Try it:** + +- Visit `/examples/time-based-revalidation` to see cached data +- Refresh within 30 seconds - timestamp stays the same +- Wait 30+ seconds and refresh - timestamp updates + +### 5. Fetch with Tags (`/examples/fetch-tags`) + +Demonstrates fetch caching with tags and time-based revalidation. + +**Features:** + +- Time-based revalidation (24 hours) +- Cache tags for selective invalidation +- Clear cache button to test tag revalidation +- Shows character data from Futurama API +- Displays cache information and rendered timestamp + +**Try it:** + +- Visit `/examples/fetch-tags` to see cached data +- Click "Clear Cache" to invalidate the cache +- Reload the page to see fresh data + +### 6. unstable_cache (`/examples/unstable-cache`) + +Demonstrates persistent caching with `unstable_cache` for function results. + +**Features:** + +- Cache any function, not just fetch requests +- Tags and revalidation support +- Side-by-side comparison with fetch caching +- Perfect for database queries and computations +- Shows when to use unstable_cache vs fetch + +**Try it:** + +- Visit `/examples/unstable-cache` to see both caching methods +- Compare the timestamps and behavior +- Click "Clear Tag Cache" to invalidate both caches +- Understand when to use unstable_cache vs fetch + +### 7. revalidateTag() with cacheLife (`/examples/revalidate-tag-cachelife`) + +Demonstrates the updated `revalidateTag()` API in Next.js 16 with cacheLife profiles. + +**Features:** + +- Breaking change from Next.js 15 (cacheLife now required) +- Different cacheLife profiles: 'max', 'hours', 'days' +- Stale-while-revalidate behavior +- Examples for each profile type +- Code examples showing migration from Next.js 15 + +**Try it:** + +- Visit `/examples/revalidate-tag-cachelife` to see all three profiles +- Click "Revalidate" buttons to test each profile +- Compare the behavior of different cacheLife profiles +- See code examples for Next.js 15 vs Next.js 16 + +### 8. ISR with Static Params (`/examples/isr/blog/[id]`) + +Incremental Static Regeneration with `generateStaticParams`. + +**Features:** + +- Static generation at build time +- On-demand regeneration +- Time-based revalidation (1 hour) +- Multiple blog post routes + +**Try it:** + +- Visit `/examples/isr/blog/1` for the first post +- Try different IDs like `/examples/isr/blog/2`, `/examples/isr/blog/3` +- Check the rendered timestamp to see caching in action + +### 9. Static Params Test (`/examples/static-params/[testName]`) + +Tests static params generation with dynamic routes. + +**Features:** + +- Static params generation +- Dynamic params support +- Short revalidation period (5 seconds) for testing +- Shows generation type (static vs dynamic) + +**Try it:** + +- Visit `/examples/static-params/cache` (pre-generated) +- Try `/examples/static-params/test1` or `/examples/static-params/test2` (on-demand) + +## API Routes + +### Cache Revalidation (`/api/revalidate`) + +Unified endpoint for revalidating cache by tag or path. + +**Usage:** + +**Tag-based revalidation (GET):** + +- `GET /api/revalidate?tag=futurama` - Revalidates cache for the "futurama" tag with 'max' profile +- `GET /api/revalidate?tag=futurama&cacheLife=hours` - Revalidates with 'hours' profile +- `GET /api/revalidate?tag=futurama&cacheLife=days` - Revalidates with 'days' profile + +**Tag-based revalidation (POST):** + +- `POST /api/revalidate` with body `{ "tag": "futurama" }` - Revalidates cache for a tag (defaults to 'max') +- `POST /api/revalidate` with body `{ "tag": "futurama", "cacheLife": "hours" }` - Revalidates with specific profile + +**Path-based revalidation (POST):** + +- `POST /api/revalidate` with body `{ "path": "/examples/default-cache" }` - Revalidates cache for a specific path + +**Examples:** + +```bash +# Revalidate by tag (GET) - defaults to 'max' profile +curl http://localhost:3000/api/revalidate?tag=futurama + +# Revalidate by tag with specific profile (GET) +curl http://localhost:3000/api/revalidate?tag=futurama&cacheLife=hours + +# Revalidate by tag (POST) - defaults to 'max' profile +curl -X POST http://localhost:3000/api/revalidate \ + -H "Content-Type: application/json" \ + -d '{"tag": "futurama"}' + +# Revalidate by tag with specific profile (POST) +curl -X POST http://localhost:3000/api/revalidate \ + -H "Content-Type: application/json" \ + -d '{"tag": "futurama", "cacheLife": "days"}' + +# Revalidate by path (POST) +curl -X POST http://localhost:3000/api/revalidate \ + -H "Content-Type: application/json" \ + -d '{"path": "/examples/default-cache"}' +``` + +## Cache Handler + +This example uses a custom Redis cache handler configured in `cache-handler.mjs`. The handler supports: + +- Redis string-based caching +- Local LRU fallback +- Composite caching strategy +- Tag-based cache invalidation + +**Note:** The cache handler only works in production mode. In development mode, Next.js bypasses the cache handler entirely. You'll see a warning message in the console: `"Next.js does not use the cache in development mode. Use production mode to enable caching."` -## Clear fetch example cache +## Technologies -- http://localhost:3000/api/cache +- Next.js 16 +- React 19 +- TypeScript +- Tailwind CSS +- Redis +- @fortedigital/nextjs-cache-handler diff --git a/examples/redis-minimal/eslint.config.mjs b/examples/redis-minimal/eslint.config.mjs index c85fb67..6d22b8e 100644 --- a/examples/redis-minimal/eslint.config.mjs +++ b/examples/redis-minimal/eslint.config.mjs @@ -1,16 +1,18 @@ -import { dirname } from "path"; -import { fileURLToPath } from "url"; -import { FlatCompat } from "@eslint/eslintrc"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); - -const compat = new FlatCompat({ - baseDirectory: __dirname, -}); +import nextCoreWebVitals from "eslint-config-next/core-web-vitals"; +import nextTypescript from "eslint-config-next/typescript"; const eslintConfig = [ - ...compat.extends("next/core-web-vitals", "next/typescript"), + ...nextCoreWebVitals, + ...nextTypescript, + { + ignores: [ + "node_modules/**", + ".next/**", + "out/**", + "build/**", + "next-env.d.ts", + ], + }, ]; export default eslintConfig; diff --git a/examples/redis-minimal/next.config.ts b/examples/redis-minimal/next.config.ts index 3840355..1a4b695 100644 --- a/examples/redis-minimal/next.config.ts +++ b/examples/redis-minimal/next.config.ts @@ -3,9 +3,6 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { cacheHandler: require.resolve("./cache-handler.mjs"), cacheMaxMemorySize: 0, // disable default in-memory caching - experimental: { - //ppr: "incremental", - }, }; export default nextConfig; diff --git a/examples/redis-minimal/package.json b/examples/redis-minimal/package.json index 5016ad8..c08ce34 100644 --- a/examples/redis-minimal/package.json +++ b/examples/redis-minimal/package.json @@ -10,24 +10,27 @@ "dev": "next dev --turbopack", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "eslint ." }, "dependencies": { "@fortedigital/nextjs-cache-handler": "workspace:*", - "next": "^15.5.6", - "react": "^19.2.0", - "react-dom": "^19.2.0", - "redis": "^5.9.0" + "next": "16.0.3", + "react": "19.2.0", + "react-dom": "19.2.0", + "redis": "^5.10.0" }, "devDependencies": { - "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", "@types/node": "^24", - "@types/react": "^19", - "@types/react-dom": "^19", + "@types/react": "19.2.6", + "@types/react-dom": "19.2.3", "eslint": "^9", - "eslint-config-next": "15.5.6", + "eslint-config-next": "16.0.3", "tailwindcss": "^4", "typescript": "^5" + }, + "overrides": { + "@types/react": "19.2.6", + "@types/react-dom": "19.2.3" } } diff --git a/examples/redis-minimal/src/app/api/cache/route.ts b/examples/redis-minimal/src/app/api/cache/route.ts deleted file mode 100644 index b44e171..0000000 --- a/examples/redis-minimal/src/app/api/cache/route.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { revalidateTag } from "next/cache"; - -export async function GET() { - revalidateTag("futurama"); - return new Response("Cache cleared for futurama tag"); -} diff --git a/examples/redis-minimal/src/app/api/revalidate/route.ts b/examples/redis-minimal/src/app/api/revalidate/route.ts new file mode 100644 index 0000000..a0b7f6a --- /dev/null +++ b/examples/redis-minimal/src/app/api/revalidate/route.ts @@ -0,0 +1,71 @@ +import { revalidateTag, revalidatePath } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function GET(request: NextRequest) { + const searchParams = request.nextUrl.searchParams; + const tag = searchParams.get("tag"); + const cacheLife = (searchParams.get("cacheLife") || "max") as + | "max" + | "hours" + | "days"; + + if (tag) { + try { + revalidateTag(tag, cacheLife); + return new Response( + `Cache revalidated for tag: ${tag} with profile: ${cacheLife}`, + { + status: 200, + } + ); + } catch { + return new Response(`Error revalidating cache for tag: ${tag}`, { + status: 500, + }); + } + } + + return new Response("Tag parameter is required for GET requests", { + status: 400, + }); +} + +export async function POST(request: NextRequest) { + try { + const body = await request.json(); + const { tag, path } = body; + + if (tag) { + const cacheLife = (body.cacheLife || "max") as "max" | "hours" | "days"; + revalidateTag(tag, cacheLife); + return new Response( + `Cache revalidated for tag: ${tag} with profile: ${cacheLife}`, + { + status: 200, + } + ); + } + + if (path) { + const type = body.type as "page" | "layout" | undefined; + if (type) { + revalidatePath(path, type); + return new Response(`Cache revalidated for ${type}: ${path}`, { + status: 200, + }); + } + revalidatePath(path); + return new Response(`Cache revalidated for path: ${path}`, { + status: 200, + }); + } + + return new Response("Either 'tag' or 'path' is required", { + status: 400, + }); + } catch (error) { + return new Response(`Error revalidating cache: ${error}`, { + status: 500, + }); + } +} diff --git a/examples/redis-minimal/src/app/examples/default-cache/page.tsx b/examples/redis-minimal/src/app/examples/default-cache/page.tsx new file mode 100644 index 0000000..de42b62 --- /dev/null +++ b/examples/redis-minimal/src/app/examples/default-cache/page.tsx @@ -0,0 +1,167 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { RevalidatePathButton } from "@/components/RevalidatePathButton"; +import { FuturamaCharacter } from "@/types/futurama"; + +export default async function DefaultCacheExample() { + let name: string; + let character: FuturamaCharacter; + const timestamp = new Date().toISOString(); + + try { + const characterResponse = await fetch( + "https://api.sampleapis.com/futurama/characters/2", + { + cache: "force-cache", + } + ); + character = await characterResponse.json(); + name = character.name.first; + } catch (error) { + console.error("Error fetching character data:", error); + return ( + +
+ An error occurred during fetch. Please check your network connection. +
+
+ ); + } + + return ( + } + > +
+ +
    +
  • + By default, Next.js uses{" "} + + cache: "force-cache" + {" "} + for fetch requests +
  • +
  • + Data is cached indefinitely until the cache is manually cleared or + the build is redeployed +
  • +
  • + This is the most aggressive caching strategy - perfect for static + or rarely-changing data +
  • +
  • + The timestamp shows when this page was first rendered (it will + remain the same on subsequent requests) +
  • +
  • + Click "Refresh Cache" to manually revalidate the page + cache and see fresh data +
  • +
+
+ +
+
+

+ Character Data +

+
+
+ + Name: + {" "} + {name} +
+ {character.name.middle && ( +
+ + Middle Name: + {" "} + + {character.name.middle} + +
+ )} +
+ + Last Name: + {" "} + + {character.name.last} + +
+ {character.occupation && ( +
+ + Occupation: + {" "} + + {character.occupation} + +
+ )} +
+
+ +
+

+ Cache Information +

+
+
+ + Rendered at: + {" "} + + {timestamp} + +
+
+ + Cache Strategy: + {" "} + + force-cache + +
+
+ + Revalidation: + {" "} + + Never (indefinite) + +
+
+
+
+ +
+

+ Code Example +

+ + {`const response = await fetch( + "https://api.sampleapis.com/futurama/characters/2", + { + cache: "force-cache", + } +); + +// Or simply omit cache option (default behavior): +const response = await fetch( + "https://api.sampleapis.com/futurama/characters/2" +);`} + +
+
+
+ ); +} diff --git a/examples/redis-minimal/src/app/examples/fetch-tags/page.tsx b/examples/redis-minimal/src/app/examples/fetch-tags/page.tsx new file mode 100644 index 0000000..4d351a7 --- /dev/null +++ b/examples/redis-minimal/src/app/examples/fetch-tags/page.tsx @@ -0,0 +1,168 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { ClearCacheButton } from "@/components/ClearCacheButton"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { FuturamaCharacter } from "@/types/futurama"; + +export default async function FetchTagsExample() { + let name: string; + let character: FuturamaCharacter; + const timestamp = new Date().toISOString(); + + try { + const characterResponse = await fetch( + "https://api.sampleapis.com/futurama/characters/1", + { + next: { + revalidate: 86400, + tags: ["futurama"], + }, + } + ); + character = await characterResponse.json(); + name = character.name.first; + } catch (error) { + console.error("Error fetching character data:", error); + return ( + +
+ An error occurred during fetch. Please check your network connection. +
+
+ ); + } + + return ( + } + > +
+ +
    +
  • + Data is fetched with a 24-hour revalidation period ( + + revalidate: 86400 + + ) +
  • +
  • + Cache is tagged with{" "} + + "futurama" + {" "} + for selective invalidation +
  • +
  • + Click "Clear Cache" to invalidate the cache and see + fresh data on reload +
  • +
  • + The timestamp shows when this page was rendered (cached pages will + show the same timestamp) +
  • +
+
+ +
+
+

+ Character Data +

+
+
+ + Name: + {" "} + {name} +
+ {character.name.middle && ( +
+ + Middle Name: + {" "} + + {character.name.middle} + +
+ )} +
+ + Last Name: + {" "} + + {character.name.last} + +
+ {character.occupation && ( +
+ + Occupation: + {" "} + + {character.occupation} + +
+ )} +
+
+ +
+

+ Cache Information +

+
+
+ + Rendered at: + {" "} + + {timestamp} + +
+
+ + Cache Tag: + {" "} + + futurama + +
+
+ + Revalidation: + {" "} + + 24 hours + +
+
+
+
+ +
+

+ Code Example +

+ + {`const response = await fetch( + "https://api.sampleapis.com/futurama/characters/1", + { + next: { + revalidate: 86400, + tags: ["futurama"], + }, + } +);`} + +
+
+
+ ); +} + diff --git a/examples/redis-minimal/src/app/examples/isr/blog/[id]/page.tsx b/examples/redis-minimal/src/app/examples/isr/blog/[id]/page.tsx new file mode 100644 index 0000000..bd9a28c --- /dev/null +++ b/examples/redis-minimal/src/app/examples/isr/blog/[id]/page.tsx @@ -0,0 +1,170 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { RevalidatePathButton } from "@/components/RevalidatePathButton"; + +interface Post { + id: string; + title: string; + content: string; +} + +export const revalidate = 3600; + +export async function generateStaticParams() { + try { + const posts: Post[] = await fetch("https://api.vercel.app/blog").then( + (res) => res.json() + ); + return posts.map((post) => ({ + id: String(post.id), + })); + } catch (error) { + console.error("Error generating static params:", error); + return []; + } +} + +export default async function Page({ + params, +}: { + params: Promise<{ id: string }>; +}) { + const { id } = await params; + const timestamp = new Date().toISOString(); + + let post: Post; + try { + post = await fetch(`https://api.vercel.app/blog/${id}`).then((res) => + res.json() + ); + } catch { + return ( + +
+ An error occurred fetching the post. Please check your network + connection. +
+
+ ); + } + + return ( + } + > +
+ +
    +
  • + + generateStaticParams + {" "} + generates static paths at build time +
  • +
  • + Pages are statically generated and cached for 1 hour ( + + revalidate: 3600 + + ) +
  • +
  • + After the revalidation period, pages are regenerated on the next + request +
  • +
  • + Try visiting different blog IDs (1, 2, 3, etc.) to see different + posts +
  • +
  • + Click "Refresh Cache" to manually revalidate this page + before the 1-hour period expires +
  • +
+
+ +
+
+

+ Blog Post +

+
+
+ + Post ID: + {" "} + {id} +
+

+ {post.title} +

+

+ {post.content} +

+
+
+ +
+

+ Cache Information +

+
+
+ + Rendered at: + {" "} + + {timestamp} + +
+
+ + Revalidation: + {" "} + 1 hour +
+
+ + Generation: + {" "} + + Static (ISR) + +
+
+
+
+ +
+

+ Code Example +

+ + {`export async function generateStaticParams() { + const posts = await fetch("https://api.vercel.app/blog") + .then((res) => res.json()); + return posts.map((post) => ({ + id: String(post.id), + })); +} + +export const revalidate = 3600; + +export default async function Page({ params }) { + const { id } = await params; + const post = await fetch(\`https://api.vercel.app/blog/\${id}\`) + .then((res) => res.json()); + return
{post.title}
; +}`} +
+
+
+
+ ); +} diff --git a/examples/redis-minimal/src/app/examples/no-store/page.tsx b/examples/redis-minimal/src/app/examples/no-store/page.tsx new file mode 100644 index 0000000..5c5d593 --- /dev/null +++ b/examples/redis-minimal/src/app/examples/no-store/page.tsx @@ -0,0 +1,167 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { RevalidatePathButton } from "@/components/RevalidatePathButton"; +import { FuturamaCharacter } from "@/types/futurama"; + +export default async function NoStoreExample() { + let name: string; + let character: FuturamaCharacter; + const timestamp = new Date().toISOString(); + + try { + const characterResponse = await fetch( + "https://api.sampleapis.com/futurama/characters/3", + { + cache: "no-store", + } + ); + character = await characterResponse.json(); + name = character.name.first; + } catch (error) { + console.error("Error fetching character data:", error); + return ( + +
+ An error occurred during fetch. Please check your network connection. +
+
+ ); + } + + return ( + + } + > +
+ +
    +
  • + Using{" "} + + cache: "no-store" + {" "} + tells Next.js to never cache the response +
  • +
  • + Every request will fetch fresh data from the API, ensuring you + always get the latest information +
  • +
  • + The timestamp will change on every page load, showing that data is + fetched fresh each time +
  • +
  • + Use this for: real-time data, user-specific content, frequently + changing data, or when you need guaranteed freshness +
  • +
  • + Trade-off: No caching means every request hits the API, which can + increase latency and API usage +
  • +
+
+ +
+
+

+ Character Data +

+
+
+ + Name: + {" "} + {name} +
+ {character.name.middle && ( +
+ + Middle Name: + {" "} + + {character.name.middle} + +
+ )} +
+ + Last Name: + {" "} + + {character.name.last} + +
+ {character.occupation && ( +
+ + Occupation: + {" "} + + {character.occupation} + +
+ )} +
+
+ +
+

+ Cache Information +

+
+
+ + Rendered at: + {" "} + + {timestamp} + + + (changes on every request) + +
+
+ + Cache Strategy: + {" "} + + no-store + +
+
+ + Caching: + {" "} + + Disabled (always fresh) + +
+
+
+
+ +
+

+ Code Example +

+ + {`const response = await fetch( + "https://api.sampleapis.com/futurama/characters/3", + { + cache: "no-store", + } +);`} + +
+
+
+ ); +} diff --git a/examples/redis-minimal/src/app/examples/revalidate-tag-cachelife/page.tsx b/examples/redis-minimal/src/app/examples/revalidate-tag-cachelife/page.tsx new file mode 100644 index 0000000..9ed88e2 --- /dev/null +++ b/examples/redis-minimal/src/app/examples/revalidate-tag-cachelife/page.tsx @@ -0,0 +1,406 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { RevalidateTagButton } from "@/components/RevalidateTagButton"; +import { FuturamaCharacter } from "@/types/futurama"; + +async function fetchCharacter( + id: string, + tag: string +): Promise { + const response = await fetch( + `https://api.sampleapis.com/futurama/characters/${id}`, + { + next: { + revalidate: 3600, + tags: [tag], + }, + } + ); + return response.json(); +} + +export default async function RevalidateTagCacheLifeExample() { + const timestamp = new Date().toISOString(); + + let maxProfile: FuturamaCharacter; + let hoursProfile: FuturamaCharacter; + let daysProfile: FuturamaCharacter; + + try { + maxProfile = await fetchCharacter("7", "cachelife-max"); + hoursProfile = await fetchCharacter("8", "cachelife-hours"); + daysProfile = await fetchCharacter("9", "cachelife-days"); + } catch (error) { + console.error("Error fetching character data:", error); + return ( + +
+ An error occurred during fetch. Please check your network connection. +
+
+ ); + } + + return ( + +
+ +
    +
  • + Next.js 15:{" "} + + revalidateTag(tag) + +
  • +
  • + Next.js 16:{" "} + + revalidateTag(tag, cacheLife) + {" "} + - cacheLife is now required +
  • +
  • + The{" "} + + cacheLife + {" "} + parameter enables stale-while-revalidate behavior +
  • +
  • + Built-in profiles:{" "} + + 'max' + + ,{" "} + + 'hours' + + ,{" "} + + 'days' + +
  • +
  • + You can also create custom cacheLife profiles for specific use + cases +
  • +
+
+ +
+

+ ⚠️ Important: Custom Cache Handler Limitation +

+
+

+ Note: The{" "} + + cacheLife + {" "} + parameter is handled by Next.js internally and is not directly + exposed to custom cache handlers. +

+

+ There are two different cache handler APIs in + Next.js 16: +

+
    +
  • + Incremental Cache Handler (used by this + package): Used for{" "} + + fetch + + ,{" "} + + revalidateTag + + , ISR, etc. Implements{" "} + + revalidateTag(tag: string) + {" "} + - does not receive{" "} + + cacheLife + + . +
  • +
  • + New Cache Handlers API (for{" "} + + 'use cache' + {" "} + directive): Implements{" "} + + updateTags(tags, durations) + {" "} + with{" "} + + durations.expire + + , but this is a different mechanism and not the same as{" "} + + cacheLife + {" "} + profiles. +
  • +
+

+ The{" "} + + cacheLife + {" "} + parameter for{" "} + + revalidateTag() + {" "} + is processed by Next.js core and primarily affects + stale-while-revalidate behavior on Vercel's infrastructure. + Custom handlers may not fully differentiate between different{" "} + + cacheLife + {" "} + profiles. +

+

+ Reference:{" "} + + Next.js cacheHandlers documentation + +

+
+
+ +
+
+
+

+ 'max' Profile +

+ +
+

+ Maximum cache life - serves stale content while revalidating in + the background +

+
+
+ + Character: + {" "} + + {maxProfile.name.first} {maxProfile.name.last} + +
+
+ + Rendered: + {" "} + + {timestamp} + +
+
+
+ +
+
+

+ 'hours' Profile +

+ +
+

+ Hourly cache life - good balance for frequently updated content +

+
+
+ + Character: + {" "} + + {hoursProfile.name.first} {hoursProfile.name.last} + +
+
+ + Rendered: + {" "} + + {timestamp} + +
+
+
+ +
+
+

+ 'days' Profile +

+ +
+

+ Daily cache life - for content that changes infrequently +

+
+
+ + Character: + {" "} + + {daysProfile.name.first} {daysProfile.name.last} + +
+
+ + Rendered: + {" "} + + {timestamp} + +
+
+
+
+ +
+
+

+ Code Examples +

+
+
+

+ Next.js 15 (Old API - No longer works) +

+ + {`import { revalidateTag } from "next/cache"; + +// ❌ This no longer works in Next.js 16 +revalidateTag("my-tag");`} + +
+ +
+

+ Next.js 16 (New API - Required) +

+ + {`import { revalidateTag } from "next/cache"; + +// ✅ 'max' profile - maximum cache life +revalidateTag("my-tag", "max"); + +// ✅ 'hours' profile - hourly cache life +revalidateTag("my-tag", "hours"); + +// ✅ 'days' profile - daily cache life +revalidateTag("my-tag", "days"); + +// ✅ Custom profile (if configured) +revalidateTag("my-tag", "custom-profile");`} + +
+ +
+

+ Using in API Routes +

+ + {`import { revalidateTag } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function POST(request: NextRequest) { + const { tag, cacheLife } = await request.json(); + + revalidateTag(tag, cacheLife || "max"); + + return Response.json({ + message: \`Revalidated \${tag} with \${cacheLife} profile\` + }); +}`} + +
+ +
+

+ Using in Server Actions +

+ + {`"use server"; + +import { revalidateTag } from "next/cache"; + +export async function updateProduct(productId: string) { + await updateProductInDatabase(productId); + + revalidateTag(\`product-\${productId}\`, "max"); + + return { success: true }; +}`} + +
+
+
+
+ +
+

+ Understanding cacheLife Profiles +

+
+

+ 'max': Maximum cache life. Serves stale + content while revalidating in the background. Best for content + that can tolerate being slightly stale. +

+

+ 'hours': Hourly cache life. Good for + content that updates frequently but doesn't need to be + real-time. +

+

+ 'days': Daily cache life. Perfect for + content that changes infrequently, like blog posts or product + catalogs. +

+

+ Stale-while-revalidate: When you call{" "} + + revalidateTag() + + , Next.js serves the stale cached content immediately while + revalidating in the background. This ensures fast responses while + keeping content fresh. +

+
+
+
+
+ ); +} diff --git a/examples/redis-minimal/src/app/examples/static-params/[testName]/page.tsx b/examples/redis-minimal/src/app/examples/static-params/[testName]/page.tsx new file mode 100644 index 0000000..ddd4fca --- /dev/null +++ b/examples/redis-minimal/src/app/examples/static-params/[testName]/page.tsx @@ -0,0 +1,135 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; + +export const dynamicParams = true; + +export const revalidate = 5; + +export default async function TestPage({ + params, +}: { + params: Promise<{ testName: string }>; +}) { + const { testName } = await params; + const timestamp = new Date().toISOString(); + + return ( + +
+ +
    +
  • + + generateStaticParams + {" "} + generates the "cache" route at build time +
  • +
  • + + dynamicParams: true + {" "} + allows other dynamic routes to be generated on demand +
  • +
  • + Very short revalidation period (5 seconds) for testing purposes +
  • +
  • + Try visiting different routes like{" "} + + /examples/static-params/test1 + {" "} + or{" "} + + /examples/static-params/test2 + +
  • +
+
+ +
+
+

+ Route Information +

+
+
+ + Route Parameter: + {" "} + + {testName} + +
+
+ + Rendered at: + {" "} + + {timestamp} + +
+
+
+ +
+

+ Cache Information +

+
+
+ + Revalidation: + {" "} + 5 seconds +
+
+ + Dynamic Params: + {" "} + Enabled +
+
+ + Generation: + {" "} + + {testName === "cache" + ? "Static (pre-generated)" + : "On-demand (dynamic)"} + +
+
+
+
+ +
+

+ Code Example +

+ +{`export const dynamicParams = true; +export const revalidate = 5; + +export async function generateStaticParams() { + return [{ testName: "cache" }]; +} + +export default async function TestPage({ params }) { + const { testName } = await params; + return
{testName}
; +}`} +
+
+
+
+ ); +} + +export async function generateStaticParams() { + return [{ testName: "cache" }]; +} + diff --git a/examples/redis-minimal/src/app/examples/time-based-revalidation/page.tsx b/examples/redis-minimal/src/app/examples/time-based-revalidation/page.tsx new file mode 100644 index 0000000..c22a717 --- /dev/null +++ b/examples/redis-minimal/src/app/examples/time-based-revalidation/page.tsx @@ -0,0 +1,181 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { RevalidatePathButton } from "@/components/RevalidatePathButton"; +import { FuturamaCharacter } from "@/types/futurama"; + +export default async function TimeBasedRevalidationExample() { + let name: string; + let character: FuturamaCharacter; + const timestamp = new Date().toISOString(); + + try { + const characterResponse = await fetch( + "https://api.sampleapis.com/futurama/characters/4", + { + next: { + revalidate: 30, + }, + } + ); + character = await characterResponse.json(); + name = character.name.first; + } catch (error) { + console.error("Error fetching character data:", error); + return ( + +
+ An error occurred during fetch. Please check your network connection. +
+
+ ); + } + + return ( + } + > +
+ +
    +
  • + Using{" "} + + next: { revalidate: 30 } + {" "} + caches data for 30 seconds +
  • +
  • + During the revalidation period, cached data is served instantly + (the timestamp stays the same) +
  • +
  • + After 30 seconds, the next request will trigger a background + revalidation to fetch fresh data +
  • +
  • + This provides a good balance: fast responses with automatic + freshness updates +
  • +
  • + Perfect for data that changes periodically but doesn't need + to be real-time +
  • +
  • + Try refreshing the page - if less than 30 seconds have passed, + you'll see the same timestamp +
  • +
  • + Click "Refresh Cache" to manually revalidate before the + 30-second period expires +
  • +
+
+ +
+
+

+ Character Data +

+
+
+ + Name: + {" "} + {name} +
+ {character.name.middle && ( +
+ + Middle Name: + {" "} + + {character.name.middle} + +
+ )} +
+ + Last Name: + {" "} + + {character.name.last} + +
+ {character.occupation && ( +
+ + Occupation: + {" "} + + {character.occupation} + +
+ )} +
+
+ +
+

+ Cache Information +

+
+
+ + Rendered at: + {" "} + + {timestamp} + +
+
+ + Revalidation Period: + {" "} + + 30 seconds + +
+
+ + Cache Strategy: + {" "} + + Time-based ISR + +
+
+

+ The timestamp will remain the same for 30 seconds. After that, + the next request will fetch fresh data. +

+
+
+
+
+ +
+

+ Code Example +

+ + {`const response = await fetch( + "https://api.sampleapis.com/futurama/characters/4", + { + next: { + revalidate: 30, // Revalidate every 30 seconds + }, + } +);`} + +
+
+
+ ); +} + diff --git a/examples/redis-minimal/src/app/examples/unstable-cache/page.tsx b/examples/redis-minimal/src/app/examples/unstable-cache/page.tsx new file mode 100644 index 0000000..ce4659d --- /dev/null +++ b/examples/redis-minimal/src/app/examples/unstable-cache/page.tsx @@ -0,0 +1,304 @@ +import { ExampleLayout } from "@/components/ExampleLayout"; +import { ClearCacheButton } from "@/components/ClearCacheButton"; +import { RevalidatePathButton } from "@/components/RevalidatePathButton"; +import { InfoCard } from "@/components/InfoCard"; +import { CodeBlock } from "@/components/CodeBlock"; +import { unstable_cache } from "next/cache"; +import { FuturamaCharacter } from "@/types/futurama"; + +async function fetchCharacter(id: string): Promise { + const response = await fetch( + `https://api.sampleapis.com/futurama/characters/${id}`, + { + cache: "no-store", + } + ); + return response.json(); +} + +const getCachedCharacter = unstable_cache( + async (id: string) => { + return fetchCharacter(id); + }, + ["futurama-character"], + { + tags: ["futurama", "characters"], + revalidate: 60, + } +); + +export default async function UnstableCacheExample() { + const timestamp = new Date().toISOString(); + const characterId = "6"; + + let character: FuturamaCharacter; + let fetchCharacterData: FuturamaCharacter; + let fetchTimestamp: string; + + try { + character = await getCachedCharacter(characterId); + fetchTimestamp = new Date().toISOString(); + + const fetchResponse = await fetch( + `https://api.sampleapis.com/futurama/characters/${characterId}`, + { + next: { + revalidate: 60, + tags: ["futurama", "characters"], + }, + } + ); + fetchCharacterData = await fetchResponse.json(); + } catch (error) { + console.error("Error fetching character data:", error); + return ( + +
+ An error occurred during fetch. Please check your network connection. +
+
+ ); + } + + return ( + + + + + } + > +
+ +
    +
  • + + unstable_cache + {" "} + caches the result of function calls across requests +
  • +
  • + Unlike fetch caching, this works for any function, not just API + calls +
  • +
  • Supports tags and revalidation just like fetch caching
  • +
  • + Cache key is based on the function arguments and the key array +
  • +
  • + Perfect for caching database queries, computed values, or any + expensive operations +
  • +
  • + Both examples below use the same revalidation (60 seconds) and + tags for comparison +
  • +
+
+ +
+
+
+

+ unstable_cache Result +

+
+
+ + Name: + {" "} + + {character.name.first} {character.name.last} + +
+ {character.occupation && ( +
+ + Occupation: + {" "} + + {character.occupation} + +
+ )} +
+ + Rendered at: + {" "} + + {timestamp} + +
+
+
+
+ +
+
+

+ fetch Result (for comparison) +

+
+
+ + Name: + {" "} + + {fetchCharacterData.name.first}{" "} + {fetchCharacterData.name.last} + +
+ {fetchCharacterData.occupation && ( +
+ + Occupation: + {" "} + + {fetchCharacterData.occupation} + +
+ )} +
+ + Rendered at: + {" "} + + {fetchTimestamp} + +
+
+
+
+
+ +
+

+ Cache Information +

+
+
+ + Revalidation: + {" "} + + 60 seconds + +
+
+ + Cache Tags: + {" "} + + futurama + + + characters + +
+
+ + Character ID: + {" "} + + {characterId} + +
+
+
+ +
+
+

+ unstable_cache Code Example +

+ + {`import { unstable_cache } from "next/cache"; + +async function fetchCharacter(id: string) { + const response = await fetch( + \`https://api.sampleapis.com/futurama/characters/\${id}\`, + { cache: "no-store" } + ); + return response.json(); +} + +const getCachedCharacter = unstable_cache( + async (id: string) => { + return fetchCharacter(id); + }, + ["futurama-character"], + { + tags: ["futurama", "characters"], + revalidate: 60, + } +); + +export default async function Page() { + const character = await getCachedCharacter("6"); + return
{character.name.first}
; +}`} +
+
+ +
+

+ fetch Code Example (for comparison) +

+ + {`export default async function Page() { + const response = await fetch( + "https://api.sampleapis.com/futurama/characters/6", + { + next: { + revalidate: 60, + tags: ["futurama", "characters"], + }, + } + ); + const character = await response.json(); + return
{character.name.first}
; +}`} +
+
+
+ +
+

+ Key Differences: unstable_cache vs fetch +

+
+
+ unstable_cache: +
    +
  • Works with any function, not just fetch
  • +
  • Cache key includes function arguments
  • +
  • Perfect for database queries, computations, etc.
  • +
  • More flexible for complex caching scenarios
  • +
+
+
+ fetch: +
    +
  • Built-in caching for HTTP requests
  • +
  • Simpler API for API calls
  • +
  • Automatic request deduplication
  • +
  • Best for external API calls
  • +
+
+

+ When to use unstable_cache: When you need to + cache the result of database queries, complex computations, or any + non-fetch operations. When you need more control over cache keys. +

+
+
+
+
+ ); +} diff --git a/examples/redis-minimal/src/app/examples/update-tag/SettingsForm.tsx b/examples/redis-minimal/src/app/examples/update-tag/SettingsForm.tsx new file mode 100644 index 0000000..74df6bc --- /dev/null +++ b/examples/redis-minimal/src/app/examples/update-tag/SettingsForm.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useState, useTransition } from "react"; +import { updateUserSettings } from "./actions"; + +export function SettingsForm() { + const [isPending, startTransition] = useTransition(); + const [message, setMessage] = useState(null); + + const handleSubmit = async (formData: FormData) => { + setMessage(null); + startTransition(async () => { + try { + const result = await updateUserSettings(formData); + setMessage(result.message); + // Reload after a short delay to show the updated cache + setTimeout(() => { + window.location.reload(); + }, 500); + } catch { + setMessage("Error updating settings"); + } + }); + }; + + return ( +
+
+ + +
+
+ + +
+ + {message && ( +
+ {message} +
+ )} +
+ ); +} diff --git a/examples/redis-minimal/src/app/examples/update-tag/UpdateTagForm.tsx b/examples/redis-minimal/src/app/examples/update-tag/UpdateTagForm.tsx new file mode 100644 index 0000000..4a9944f --- /dev/null +++ b/examples/redis-minimal/src/app/examples/update-tag/UpdateTagForm.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useState, useTransition } from "react"; +import { createPostWithUpdateTag } from "./actions"; + +export function UpdateTagForm() { + const [isPending, startTransition] = useTransition(); + const [message, setMessage] = useState(null); + + const handleSubmit = async (formData: FormData) => { + setMessage(null); + startTransition(async () => { + try { + const result = await createPostWithUpdateTag(formData); + setMessage(result.message); + // Reload after a short delay to show the updated cache + setTimeout(() => { + window.location.reload(); + }, 500); + } catch { + setMessage("Error creating post"); + } + }); + }; + + return ( +
+
+ + +
+
+ +