Zestawy rozmówBlog

Twoja wymarzona praca? Lets Git IT.
Interaktywna platforma przygotowująca do rozmów technicznych dla nowoczesnych programistów.

XGitHub

Platforma

  • Kategorie

Zasoby

  • Blog
  • O aplikacji
  • FAQ
  • Sugestie

Prawne

  • Polityka prywatności
  • Regulamin

© 2026 LetsGit.IT. Wszelkie prawa zastrzeżone.

LetsGit.IT/Kategorie/Next.js
Next.jshard

Co to jest streaming + `Suspense` w App Router (i `loading.tsx`)?

Tagi
#streaming#suspense#loading
Wróć do kategoriiPrzejdź do quizu

Odpowiedź

Streaming pozwala serwerowi wysyłać HTML „kawałkami” w miarę dostępności danych. Granice `Suspense` (i `loading.tsx`) pokazują fallback, gdy segment się ładuje, co poprawia odczuwalną wydajność i TTFB.

Odpowiedź zaawansowana

Głębiej

W React 18 serwer może **streamować** HTML progresywnie, zamiast czekać aż cała strona będzie gotowa. Granice `Suspense` wyznaczają miejsca, gdzie UI może się „zatrzymać”: Next może wysłać szybciej szkielet, pokazać fallback, a potem dostreamować właściwą treść, gdy dane się pojawią.

W App Router:

  • `loading.tsx` to wbudowany fallback (Suspense) dla segmentu trasy.
  • Możesz też robić zagnieżdżone granice przez `<Suspense fallback={...}>`.

Przykład

// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="skeleton">Ładowanie dashboardu…</div>
}

Czemu to pomaga

  • Lepsza „odczuwalna” wydajność (użytkownik szybciej widzi UI).
  • Nie blokujesz całej strony najwolniejszym źródłem danych.

Typowe pułapki

  • Waterfall: `await` sekwencyjne zamiast startu fetchy równolegle.
  • Za dużo granic i migotanie / „skaczący” UI.
  • Wrzucanie client-only logiki do serverowych fallbacków.

Powiązane pytania

Next.js
Co to jest `loading.tsx` w App Router i jak się ma do streamingu?
#nextjs#loading#suspense
Next.js
Jak unikać „waterfall” w pobieraniu danych przy SSR?
#data-fetching#promise-all#suspense