next-cache-components

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

Dépôt: georgekhananaev/claude-skills-vault
Dernière activité de la source: 10 juin 2026 à 06:37
Langue détectée de SKILL.md: anglais
Étoiles: 27
Forks: 9

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/georgekhananaev/claude-skills-vault --skill next-cache-components

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

natural-language

Shapes how every reply to the user gets written - plain everyday words instead of corporate or AI-sounding phrasing, real sentences instead of bullet-heavy formatting, no forced dash punctuation, and at most a rare bit of dry humor when it genuinely fits. Use this for every conversational response written to the user in this project, not only on special request - check it before replying, the same way a person reads over their own message before hitting send.

2026-08-12

firebase-cli

Safety-first Firebase CLI (firebase-tools v15) skill for full project control — deploy, Hosting (sites/channels/rollback), Cloud Functions (+secrets), Firestore (databases/indexes/backups/delete), Realtime Database, Auth import/export, Remote Config, App Distribution, App Hosting, Extensions, Data Connect, Emulator Suite & MCP server. Classifies every command by risk tier via a deterministic classifier script and gates destructive/irreversible/cost-incurring ops behind AskUserQuestion confirmation; enforces the --non-interactive/--force contract so nothing hangs and nothing is auto-confirmed. Wrong-project preflight prevents deploying to prod by accident. Ships a 3-level self-test (static classifier battery, live read-only, guarded live-write w/ cleanup). Use when running, planning, or debugging any `firebase` command.

2026-07-18

codex-cli

Run OpenAI Codex CLI for coding tasks, implementation, reviews, and second-opinion audits with mandatory task-based routing across GPT-5.6-or-newer models. Use when a user asks to run, ask, or use Codex; says "codex prompt"; wants a Codex code/logic/plan audit; or wants Claude to delegate work to OpenAI models. Inspect the live Codex model catalog, explicitly pin an eligible model and reasoning effort on every invocation, route clear high-volume work to Luna, everyday work to Terra, and difficult or high-value work to Sol. Use Sol with max reasoning for plan audits. Never invoke or fall back to GPT-5.5, GPT-5.4, GPT-5.3-Codex-Spark, OSS, or any model older than GPT-5.6.

2026-07-12

Tout voir dans ce dépôt

async function BlogPosts() {
  'use cache'
  cacheLife('hours')

  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      <BlogPosts />  {/* Cached */}

      <Suspense fallback={<p>Loading...</p>}>
        <UserPreferences />  {/* Dynamic - streams in */}
      </Suspense>
    </>
  )
}

async function UserPreferences() {
  const theme = (await cookies()).get('theme')?.value
  return <p>Theme: {theme}</p>
}

'use cache'

export default async function Page() {
  // Entire page is cached
  const data = await fetchData()
  return <div>{data}</div>
}

export async function CachedComponent() {
  'use cache'
  const data = await fetchData()
  return <div>{data}</div>
}

export async function getData() {
  'use cache'
  return db.query('SELECT * FROM posts')
}

'use cache'                    // Default: 5m stale, 15m revalidate

'use cache: remote'           // Platform-provided cache (Redis, KV)

'use cache: private'          // For compliance, allows runtime APIs

import { cacheLife } from 'next/cache'

async function getData() {
  'use cache'
  cacheLife('hours')  // Built-in profile
  return fetch('/api/data')
}

async function getData() {
  'use cache'
  cacheLife({
    stale: 3600,      // 1 hour - serve stale while revalidating
    revalidate: 7200, // 2 hours - background revalidation interval
    expire: 86400,    // 1 day - hard expiration
  })
  return fetch('/api/data')
}

import { cacheTag } from 'next/cache'

async function getProducts() {
  'use cache'
  cacheTag('products')
  return db.products.findMany()
}

async function getProduct(id: string) {
  'use cache'
  cacheTag('products', `product-${id}`)
  return db.products.findUnique({ where: { id } })
}

'use server'

import { updateTag } from 'next/cache'

export async function updateProduct(id: string, data: FormData) {
  await db.products.update({ where: { id }, data })
  updateTag(`product-${id}`)  // Immediate - same request sees fresh data
}

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost(data: FormData) {
  await db.posts.create({ data })
  revalidateTag('posts', 'max')  // Background SWR — single-arg form is deprecated in Next 16
  // immediate webhook-style expiry: revalidateTag('posts', { expire: 0 })
}

'use server'
import { refresh } from 'next/cache'

export async function markRead(id: string) {
  await db.notifications.update({ where: { id }, data: { read: true } })
  refresh()  // re-renders dynamic holes; cached content untouched
}

// Wrong - runtime API inside use cache
async function CachedProfile() {
  'use cache'
  const session = (await cookies()).get('session')?.value  // Error!
  return <div>{session}</div>
}

// Correct - extract outside, pass as argument
async function ProfilePage() {
  const session = (await cookies()).get('session')?.value
  return <CachedProfile sessionId={session} />
}

async function CachedProfile({ sessionId }: { sessionId: string }) {
  'use cache'
  // sessionId becomes part of cache key automatically
  const data = await fetchUserData(sessionId)
  return <div>{data.name}</div>
}

async function getData() {
  'use cache: private'
  const session = (await cookies()).get('session')?.value  // Allowed
  return fetchData(session)
}

async function Component({ userId }: { userId: string }) {
  const getData = async (filter: string) => {
    'use cache'
    // Cache key = userId (closure) + filter (argument)
    return fetch(`/api/users/${userId}?filter=${filter}`)
  }
  return getData('active')
}

import { Suspense } from 'react'
import { cookies } from 'next/headers'
import { cacheLife, cacheTag } from 'next/cache'

export default function DashboardPage() {
  return (
    <>
      {/* Static shell - instant from CDN */}
      <header><h1>Dashboard</h1></header>
      <nav>...</nav>

      {/* Cached - fast, revalidates hourly */}
      <Stats />

      {/* Dynamic - streams in with fresh data */}
      <Suspense fallback={<NotificationsSkeleton />}>
        <Notifications />
      </Suspense>
    </>
  )
}

async function Stats() {
  'use cache'
  cacheLife('hours')
  cacheTag('dashboard-stats')

  const stats = await db.stats.aggregate()
  return <StatsDisplay stats={stats} />
}

async function Notifications() {
  const userId = (await cookies()).get('userId')?.value
  const notifications = await db.notifications.findMany({
    where: { userId, read: false }
  })
  return <NotificationList items={notifications} />
}

Old Config	Replacement
`experimental.ppr`	`cacheComponents: true`
`dynamic = 'force-dynamic'`	Remove (default behavior)
`dynamic = 'force-static'`	`'use cache'` + `cacheLife('max')`
`revalidate = N`	`cacheLife({ revalidate: N })`
`unstable_cache()`	`'use cache'` directive

import { connection } from 'next/server'

async function DynamicContent() {
  await connection()  // Defer to request time
  const id = crypto.randomUUID()  // Different per request
  return <div>{id}</div>
}

next-cache-components

Options d'installation

Vérifiez les fichiers source

Cache Components (Next.js 16+)

Enable Cache Components

Three Content Types

1. Static (Auto-Prerendered)

Cache Components (Next.js 16+)

Enable Cache Components

Three Content Types

1. Static (Auto-Prerendered)

2. Cached (`use cache`)

3. Dynamic (Suspense)

`use cache` Directive

File Level

Component Level

Function Level

Cache Profiles

Built-in Profiles

`cacheLife()` - Custom Lifetime

Inline Configuration

Cache Invalidation

`cacheTag()` - Tag Cached Content

`updateTag()` - Immediate Invalidation

`revalidateTag()` - Background Revalidation

`refresh()` - Refresh Uncached Data

Runtime Data Constraint

Solution: Pass as Arguments

Exception: `use cache: private`

Cache Key Generation

Complete Example

Migration from Previous Versions

Limitations

name	next-cache-components
description	Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

next-cache-components

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Cache Components (Next.js 16+)

Enable Cache Components

Three Content Types

1. Static (Auto-Prerendered)

Plus depuis ce dépôt

Cache Components (Next.js 16+)

Enable Cache Components

Three Content Types

1. Static (Auto-Prerendered)

2. Cached (use cache)

3. Dynamic (Suspense)

use cache Directive

File Level

Component Level

Function Level

Cache Profiles

Built-in Profiles

cacheLife() - Custom Lifetime

Inline Configuration

Cache Invalidation

cacheTag() - Tag Cached Content

updateTag() - Immediate Invalidation

revalidateTag() - Background Revalidation

refresh() - Refresh Uncached Data

Runtime Data Constraint

Solution: Pass as Arguments

Exception: use cache: private

Cache Key Generation

Complete Example

Migration from Previous Versions

Limitations

2. Cached (`use cache`)

`use cache` Directive

`cacheLife()` - Custom Lifetime

`cacheTag()` - Tag Cached Content

`updateTag()` - Immediate Invalidation

`revalidateTag()` - Background Revalidation

`refresh()` - Refresh Uncached Data

Exception: `use cache: private`