cache-components
Automatyczne wskazówki do optymalizacji cache'u w Next.js z Partial Prerendering
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill dla deweloperów Next.js, który proaktywnie wspiera implementację Cache Components i Partial Prerendering (PPR). Automatycznie aktywuje się w projektach z włączonym cacheComponents: true w konfiguracji. Pomaga w stosowaniu dyrektywy 'use cache', konfigurowaniu czasu życia cache'u za pomocą cacheLife(), tagowaniu danych z cacheTag(), inwalidacji cache'u przez updateTag() i revalidateTag(), optymalizacji granic zawartości statycznej i dynamicznej, debugowaniu problemów z cache'em oraz przeglądzie implementacji Cache Components.
Jak używać
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.