Dwa rodzaje komponentów

Każdy komponent, który do tej pory napisałeś w tej sekcji, działał gdzieś, czego być może nie zauważyłeś: na serwerze. To nie jest żaden specjalny tryb, który włączasz — to ustawienie domyślne i najważniejsza idea w Next.js.

Istnieją dokładnie dwa rodzaje komponentów, a każdy z nich daje ci coś, czego nie zapewnia drugi.

Komponenty serwerowe: domyślny wybór

• Uruchamiają się raz, na serwerze, zanim strona zostanie wysłana
• Mogą być async, więc mogą używać await do pobierania danych bezpośrednio w komponencie
• Nie wysyłają żadnego JavaScriptu do przeglądarki: użytkownik pobiera wynik, a nie kod

Haczyk polega na tym, że gdy strona trafia do przeglądarki, komponent serwerowy jest już gotowy. To migawka. Nie może niczego zapamiętać, reagować na kliknięcie ani się zmieniać.

Komponenty klienckie: włącz je

Gdy chcesz, aby strona reagowała, dodajesz plik do przeglądarki za pomocą jednej linii na samym początku:

'use client';

Oznacza to, że plik jest komponentem klienckim, a tylko komponenty klienckie mogą używać:

• Hooków: useState, useEffect i innych
• Obsługi zdarzeń: onClick, onChange, …
• API przeglądarki: window, localStorage

Zwróć uwagę na kompromis. Komponent serwerowy jest szybki i cichy, ale zamrożony. Komponent kliencki jest aktywny, ale jego kod trzeba pobrać i uruchomić w przeglądarce.

Od teraz przy każdym komponencie będziesz zadawać sobie pytanie nie „który z nich mi się podoba?”, ale „czy ten konkretny element musi reagować na działania użytkownika?” Jeśli odpowiedź brzmi nie (a tak jest zazwyczaj), pozostaw go na serwerze.