Toolverse
All skills
Frontend

next-cache-components

by inkeep

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

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
inkeep
Category
Frontend
Views
2
GitHub repo

About this skill

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

How to use

  1. 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.

  2. 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).

  3. 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.

  4. 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.

  5. 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.

Related skills

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

markitdown

by K-Dense-AI

Convert various file formats (PDF, Office documents, images, audio, web content, structured data) to Markdown optimized for LLM processing. Use when converting documents to markdown, extracting text from PDFs/Office files, transcribing audio, performing OCR on images, extracting

Frontend
75173

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126