Głębiej
`'use client'` mówi Next.js, że ten moduł jest **granicą Client Component**. Ten plik i wszystko, co importuje (w dół drzewa) trafi do bundla klienta i wykona się w przeglądarce.
To odblokowuje:
- hooki Reacta (`useState`, `useEffect`, `useReducer`),
- event handlery (`onClick`, `onSubmit`),
- API przeglądarki (`window`, `localStorage`).
Konsekwencje
- Client Components nie mogą importować modułów server-only (klient DB, `fs`, sekrety serwera).
- Granica `'use client'` może urosnąć „przypadkiem”, jeśli importujesz za dużo — rośnie JS wysyłany do użytkownika.
Praktyka
- Trzymaj `'use client'` małe i konkretne.
- Fetch danych rób w Server Components i przekazuj serializowalne propsy w dół.
- Stan po stronie klienta dodawaj tylko, gdy UI naprawdę tego potrzebuje.
Typowe pułapki
- `'use client'` w layoucie/root i zamiana dużej części aplikacji w client-side JS.
- Import ciężkich bibliotek do client boundary.
- Czytanie `window` w trakcie renderu (rób to w `useEffect`, jeśli trzeba).