next-cache-components
Mieszaj statyczne, cachowane i dynamiczne treści w jednej trasie Next.js 16
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill Cache Components umożliwia Partial Prerendering (PPR) w Next.js 16+. Dziel zawartość strony na trzy kategorie: statyczną (prerendowaną przy budowie), cachowaną (świeżą co kilka godzin) i dynamiczną (ładowaną w czasie rzeczywistym). Włącz cacheComponents w konfiguracji, oznacz komponenty dyrektywą 'use cache' i ustaw czas życia cache za pomocą cacheLife(). Idealne do blogów, dashboardów i stron e-commerce, gdzie część treści zmienia się rzadko, a część wymaga aktualnych danych.
Jak używać
Otwórz plik next.config.ts i dodaj flagę cacheComponents: true w obiekcie NextConfig. To zastępuje starą flagę experimental.ppr i włącza obsługę Cache Components w Twoim projekcie.
Zidentyfikuj, które komponenty powinny być statyczne (synchroniczny kod, importy, obliczenia), cachowane (dane asynchroniczne, które nie muszą być świeże przy każdym żądaniu) lub dynamiczne (dane wymagające aktualności, np. preferencje użytkownika).
Dla komponentów cachowanych dodaj dyrektywę 'use cache' na początku funkcji i ustaw czas życia cache za pomocą cacheLife('hours') lub innego okresu. Komponenty będą przechowywane i ponownie użyte zamiast pobierać dane za każdym razem.
Komponenty dynamiczne zawiń w Suspense z fallback-em (np. komunikat ładowania). Suspense pozwala na strumieniowanie danych w czasie rzeczywistym, podczas gdy reszta strony jest już dostępna.
Komponenty statyczne pozostaw bez zmian – będą automatycznie prerendowane podczas budowy. Łącz wszystkie trzy typy w jednej trasie, aby uzyskać optymalną wydajność i świeżość treści.