NextLab

Renderowanie

Sześć widocznych przykładów sposobów renderowania w Next.js.

Client Components

Counter ma dyrektywę 'use client', więc po hydracji działa w przeglądarce i może używać stanu oraz obsługi kliknięcia. Hydracja polega na tym, że React w przeglądarce łączy wyrenderowany wcześniej HTML z JavaScriptem komponentu, aby umożliwić interakcję. Mechanizm: src/app/rendering/client-components/counter.tsx.

Zakres demonstracji

  • use client
  • useState
  • hydracja
  • interakcja w przeglądarce

Przykład

Kliknij przycisk. Licznik zmieni się bez przeładowania strony.