Głębiej
Performance w Next.js to głównie (1) **ile JS wysyłasz**, oraz (2) **ile pracy jesteś w stanie cachować**.
Praktyczne usprawnienia (więcej niż dwie)
- **Mniej JS po stronie klienta**: trzymaj drzewo server-first, zepchnij `'use client'` niżej, unikaj ciężkich providerów w root.
- **Code-splitting ciężkich widgetów**: dynamic import dla rzadko używanych komponentów.
- **Obrazy**: `next/image`, poprawne rozmiary i sensowne formaty.
- **Cache + revalidate**: cachowany `fetch` + `revalidate` zamiast renderowania wszystkiego per request.
- **Bez waterfalli**: uruchamiaj fetche równolegle.
- **Fonty**: `next/font` pomaga ograniczyć layout shift.
Przykład (code splitting)
import dynamic from 'next/dynamic'
const Chart = dynamic(() => import('./Chart'), { ssr: false })
Typowe pułapki
- Client Component w top-level layoucie.
- Duże payloady JSON po stronie klienta.
- Stan zbyt wysoko w drzewie clientowym i szerokie re-rendery.