nextjs · Next.js Docs
Next.js Caching
Teaches how to implement and configure caching in Next.js using the use cache directive at both the data and UI levels, including configuration via next.config.ts and handling non-deterministic operations.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Next.js Caching
Teaches how to implement and configure caching in Next.js using the use cache directive at both the data and UI levels, including configuration via next.config.ts and handling non-deterministic operations.
When To Use
Use when you need to optimize application performance by storing the results of data fetching or component rendering to avoid redundant computations and network requests.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/nextjs-caching-workflow-guide.md | A documentation guide covering data-level and UI-level caching mechanisms within the Next.js App Router. | Questions about a documentation guide covering data-level and UI-level caching mechanisms within the Next.js App Router. |
examples/nextjs-caching-nextjs-app-router-caching-config-typescript.ts | A TypeScript configuration file demonstrating how to enable component caching within the Next.js configuration object. | Exact payloads, commands, or snippets shown in A TypeScript configuration file demonstrating how to enable component caching within the Next.js configuration object. |
examples/nextjs-caching-nextjs-config-cache-components.js | A JavaScript configuration file for Next.js that enables the cacheComponents option within the nextConfig object. | Exact payloads, commands, or snippets shown in A JavaScript configuration file for Next.js that enables the cacheComponents option within the nextConfig object. |
examples/nextjs-caching-nextjs-cachelife.tsx | A TypeScript React component demonstrating the use of the cacheLife function and the 'use cache' directive to implement data caching in Next.js. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating the use of the cacheLife function and the 'use cache' directive to impleme... |
examples/nextjs-caching-nextjs-cachelife-2.tsx | A TypeScript React component demonstrating the use of the cacheLife function and the 'use cache' directive for data caching in Next.js. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating the use of the cacheLife function and the 'use cache' directive for data c... |
examples/nextjs-caching-nextjs-app-router-suspense-data-fetching.tsx | A React component demonstrating how to use Suspense and async data fetching within the Next.js App Router. | Exact payloads, commands, or snippets shown in A React component demonstrating how to use Suspense and async data fetching within the Next.js App Router. |
examples/nextjs-caching-nextjs-app-router-cookies-header.tsx | A React component demonstrating how to access and read cookie values using the next/headers API in the App Router. | Exact payloads, commands, or snippets shown in A React component demonstrating how to access and read cookie values using the next/headers API in the App Router. |
examples/nextjs-caching-nextjs-app-router-use-cache-directive.tsx | A TypeScript React component demonstrating the use of the 'use cache' directive to cache component output based on passed props. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating the use of the 'use cache' directive to cache component output based on pa... |
examples/nextjs-caching-nextjs-app-router-connection-dynamic-rendering.tsx | A TypeScript React component demonstrating how to use the connection function to opt into dynamic rendering in the Next.js App Router. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating how to use the connection function to opt into dynamic rendering in the Ne... |
examples/nextjs-caching-nextjs-app-router-use-cache-directive-2.tsx | A TypeScript React component demonstrating the implementation of the 'use cache' directive within a Next.js App Router page. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating the implementation of the 'use cache' directive within a Next.js App Route... |
examples/nextjs-caching-nextjs-app-router-fs-read-cache.tsx | A TypeScript React component demonstrating how Next.js handles file system reads and dynamic imports within the App Router caching model. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating how Next.js handles file system reads and dynamic imports within the App R... |
examples/nextjs-caching-nextjs-app-router-suspense-layout.tsx | A TypeScript React component demonstrating the implementation of Suspense within a Next.js RootLayout for handling loading states. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating the implementation of Suspense within a Next.js RootLayout for handling lo... |
examples/nextjs-caching-nextjs-app-router-caching-suspense.tsx | A TypeScript React component demonstrating the integration of static, cached dynamic, and runtime dynamic content using Suspense and server actions. | Exact payloads, commands, or snippets shown in A TypeScript React component demonstrating the integration of static, cached dynamic, and runtime dynamic content usi... |
What This Skill Covers
- For an index of all Next.js documentation, see /docs/llms.txt. <!-- AI agent hint: To ensure client-side navigations are instant with Cache Components, expor...
- Main sections:
Enabling Cache Components,Usage,Data-level caching,UI-level caching,Streaming uncached data.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://nextjs.org/docs/app/building-your-application/rendering