Toolverse
Wszystkie skille

server-components

autor: davepoon

Opanuj React Server Components w Next.js — renderuj na serwerze, zmniejszaj JavaScript na kliencie

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Kategoria
Frontend
Wyświetlenia
1

O skillu

Skill pomagający zrozumieć architekturę React Server Components w Next.js App Router. Dowiesz się, kiedy użyć Server Components (domyślnie) do bezpośredniego dostępu do bazy danych i utrzymania wrażliwych danych na serwerze, a kiedy dodać dyrektywę 'use client' dla interaktywności. Nauczysz się mentального modelu granic komponentów, automatycznego podziału kodu i optymalizacji rozmiaru bundla klienta.

Jak używać

  1. Zainstaluj skill w swoim środowisku Claude/Copilot, wskazując repozytorium davepoon/buildwithclaude.

  2. Aktywuj skill, gdy pytasz o Server Components, Client Components, dyrektywę 'use client', wzorce RSC lub architekturę komponentów w Next.js.

  3. Opisz swój problem — na przykład: "Kiedy powinienem użyć Server Component zamiast Client Component?" lub "Jak bezpośrednio pobrać dane z bazy w komponencie?"

  4. Skill wyjaśni różnice: Server Components działają tylko na serwerze, mają dostęp do bazy i zmiennych środowiskowych, zmniejszają rozmiar bundla. Client Components wymagają dyrektywy 'use client' i obsługują stan (useState), efekty (useEffect) oraz API przeglądarki.

  5. Skorzystaj z mentalnego modelu granic komponentów — Server Component może zawierać Client Component, ale Client Component nie może zawierać Server Component jako bezpośrednie dziecko.

  6. Stosuj wskazówki do swojego projektu Next.js App Router, gdzie domyślnie wszystkie komponenty są Server Components, chyba że dodasz dyrektywę 'use client'.

Podobne skille