Next.js 15 Fullstack (App Router + Server Actions) · Lektion

UI-Streaming mit Suspense und Ladezuständen

Verbessern Sie die wahrgenommene Performance, indem Sie servergerenderte UI mit React Suspense, loading.tsx-Dateien und Skeletons streamen, damit Nutzer früher Inhalte sehen

Lektion 4 von 413 Schritte

UI-Streaming mit Suspense und Ladezuständen ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Beantworte es in der interaktiven Lektion

Recap

You learned to stream UI:

Streaming SSR sends ready HTML first and fills slow parts later
Wrap async components in Suspense with a fallback
Use loading.tsx for automatic route fallbacks
Show skeletons and use parallel boundaries

Your pages now feel fast even with slow data.

Kostenlos starten

Lerne TypeScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 22
Lektionen: 88

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „UI-Streaming mit Suspense und Ladezuständen“ kostenlos?

Ja — der vollständige Text von „UI-Streaming mit Suspense und Ladezuständen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „UI-Streaming mit Suspense und Ladezuständen“?

Verbessern Sie die wahrgenommene Performance, indem Sie servergerenderte UI mit React Suspense, loading.tsx-Dateien und Skeletons streamen, damit Nutzer früher Inhalte sehen Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?

Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „UI-Streaming mit Suspense und Ladezuständen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?

Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Optimierung von Bildern und Schriftarten
Analyse der Bundle-Größe
Fortgeschrittene Caching-Strategien
UI-Streaming mit Suspense und Ladezuständen

← Zurück zu Next.js 15 Fullstack (App Router + Server Actions)