Strumieniowanie UI za pomocą Suspense i stanów ładowania
Popraw postrzeganą wydajność, przesyłając strumieniowo renderowany na serwerze interfejs za pomocą React Suspense, plików loading.tsx i szkieletów, aby użytkownicy szybciej widzieli treść.
Strumieniowanie UI za pomocą Suspense i stanów ładowania to bezpłatna lekcja Next.js 15 Fullstack (App Router + Server Actions) na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack (App Router + Server Actions), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack (App Router + Server Actions) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
The Waterfall Problem
If a page waits for every data fetch before rendering, users stare at a blank screen. Streaming lets the server send ready parts of the page immediately and fill in slow parts as they finish.
What is Streaming SSR?
Next.js with the App Router can stream HTML in chunks. The shell and fast components arrive first; slow data-dependent sections stream in when ready, improving Time to First Byte and perceived speed.
React Suspense Basics
Suspense wraps a component that may not be ready and shows a fallback until it is. The rest of the page renders without waiting.
import { Suspense } from 'react';
<Suspense fallback={<p>Loading...</p>}>
<SlowComponent />
</Suspense>Async Server Components
In the App Router, a Server Component can be async and await data. Wrapping it in Suspense lets the page stream while that fetch resolves.
async function Reviews() {
const data = await getReviews();
return <ReviewList items={data} />;
}Streaming a Slow Section
Render the page shell instantly and stream the slow part. Users interact with the rest while reviews load.
export default function Page() {
return (
<main>
<Header />
<Suspense fallback={<ReviewsSkeleton />}>
<Reviews />
</Suspense>
</main>
);
}The loading.tsx Convention
A loading.tsx file beside a route automatically wraps that route's page in Suspense. Its export is shown instantly while the page's data loads.
// app/dashboard/loading.tsx
export default function Loading() {
return <DashboardSkeleton />;
}Building a Skeleton
A skeleton mimics the final layout with gray placeholders, reducing layout shift and signaling that content is coming.
function ReviewsSkeleton() {
return (
<div className="animate-pulse space-y-2">
<div className="h-4 bg-gray-200 rounded" />
<div className="h-4 bg-gray-200 rounded w-3/4" />
</div>
);
}Parallel Data Fetching
Avoid sequential awaits that create waterfalls. Multiple Suspense boundaries let independent sections fetch in parallel and stream as each completes.
<Suspense fallback={<A />}><Sales /></Suspense>
<Suspense fallback={<B />}><Traffic /></Suspense>Granular Boundaries
Place Suspense around the smallest slow unit, not the whole page. Finer boundaries mean more of the UI is interactive sooner.
Streaming vs Static
Streaming shines for personalized or slow data. For content that rarely changes, static generation or caching is still faster. Combine both: cache what you can, stream the rest.
Best Practices
Stream effectively:
- Wrap slow async Server Components in Suspense
- Use loading.tsx for route-level fallbacks
- Show skeletons to cut layout shift
- Use parallel boundaries to avoid waterfalls
Quick Check
Test your streaming knowledge.
Recap
You learned to stream UI:
- Streaming SSR sends ready HTML first and fills slow parts later
- Wrap async components in
Suspensewith a fallback - Use
loading.tsxfor automatic route fallbacks - Show skeletons and use parallel boundaries
Your pages now feel fast even with slow data.
Często zadawane pytania
Czy lekcja „Strumieniowanie UI za pomocą Suspense i stanów ładowania” jest bezpłatna?
Tak — pełny tekst „Strumieniowanie UI za pomocą Suspense i stanów ładowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack (App Router + Server Actions), przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack (App Router + Server Actions) zawiera 4 lekcji w sumie.
Co nauczysz się w „Strumieniowanie UI za pomocą Suspense i stanów ładowania”?
Popraw postrzeganą wydajność, przesyłając strumieniowo renderowany na serwerze interfejs za pomocą React Suspense, plików loading.tsx i szkieletów, aby użytkownicy szybciej widzieli treść. Ćwiczysz Next.js 15 Fullstack (App Router + Server Actions) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack (App Router + Server Actions)?
Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack (App Router + Server Actions) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Strumieniowanie UI za pomocą Suspense i stanów ładowania”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack (App Router + Server Actions)?
Tak. Każda lekcja Next.js 15 Fullstack (App Router + Server Actions) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Optymalizacja obrazów i fontów
- Analiza rozmiaru bundla
- Zaawansowane strategie cache’owania
- Strumieniowanie UI za pomocą Suspense i stanów ładowania