UI Streaming dengan Suspense dan Status Pemuatan
Tingkatkan kinerja yang dirasakan dengan melakukan streaming UI yang dirender server menggunakan React Suspense, berkas loading.tsx, dan kerangka pemuatan agar pengguna melihat konten lebih cepat.
UI Streaming dengan Suspense dan Status Pemuatan adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar TypeScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “UI Streaming dengan Suspense dan Status Pemuatan” gratis?
Ya — teks lengkap “UI Streaming dengan Suspense dan Status Pemuatan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “UI Streaming dengan Suspense dan Status Pemuatan”?
Tingkatkan kinerja yang dirasakan dengan melakukan streaming UI yang dirender server menggunakan React Suspense, berkas loading.tsx, dan kerangka pemuatan agar pengguna melihat konten lebih cepat. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?
Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “UI Streaming dengan Suspense dan Status Pemuatan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?
Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Optimasi Gambar & Font
- Analisis Ukuran Bundel
- Strategi Caching Lanjutan
- UI Streaming dengan Suspense dan Status Pemuatan