cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR).\n\n**PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected,
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR).\n\nPROACTIVE ACTIVATION: Use this skill automatically when working in Next.js projects that have cacheComponents: true in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations.\n\nDETECTION: At the start of a session in a Next.js project, check for cacheComponents: true in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions.\n\nUSE CASES: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
How to use
Sprawdź, czy Twój projekt Next.js ma włączone Cache Components — otwórz plik next.config.ts lub next.config.js i szukaj wpisu
cacheComponents: true. Jeśli go nie ma, dodaj go do konfiguracji, aby aktywować skill.Skill automatycznie się aktywuje na początku sesji w projekcie z włączonym Cache Components. Będzie proaktywnie stosować wzorce i best practices do wszystkich React Server Components, które piszesz.
Podczas implementacji Server Components używaj dyrektywy 'use cache' na komponentach, które chcesz cachować. Skill będzie podpowiadać, gdzie ta dyrektywa ma sens.
Konfiguruj czas życia cache'u za pomocą funkcji cacheLife() — skill pomoże Ci wybrać odpowiednie okresy dla różnych typów danych (np. krótsze dla danych użytkownika, dłuższe dla zawartości statycznej).
Taguj cached dane za pomocą cacheTag(), aby móc je później inwalidować. Skill będzie sugerować logiczne tagi na podstawie struktury Twoich komponentów i źródeł danych.
Kiedy musisz odświeżyć cache, używaj updateTag() lub revalidateTag() z odpowiednimi tagami. Skill pomoże Ci debugować problemy z cache'em i przeglądzać istniejące implementacje Cache Components pod kątem optymalizacji.