React Academy · Pelajaran

Hidrasi Selektif & Streaming HTML

Gunakan batas Suspense untuk mengalirkan potongan HTML dan menghidrasi pulau interaktif terlebih dahulu.

Hidrasi Selektif & Streaming HTML adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Masalah Hidrasi Seluruh Halaman

SSR tradisional menghidrasi seluruh halaman sekaligus. Jika satu bagian halaman memiliki JavaScript yang berat (seperti peta atau grafik), bagian tersebut menghambat hidrasi bagian lainnya — termasuk tombol interaktif sederhana.

HTML Streaming dengan renderToPipeableStream

API streaming React 18 mengirim HTML dalam beberapa potongan. Kerangka halaman tiba segera; batas Suspense mengisi konten saat data selesai diproses — pengguna dapat melihat UI sebelum semua data siap.

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/bundle.js'],
  onShellReady() {
    res.setHeader('content-type', 'text/html');
    pipe(res);
  },
  onError(error) {
    console.error(error);
  },
});

Cara Kerja Streaming dalam Praktik

React segera merender komponen yang tidak ditangguhkan (kerangka). Saat data batas Suspense selesai diproses, React mengirim potongan HTML untuk mengisinya, beserta tag skrip yang memberi tahu peramban tempat menaruhnya.

Hidrasi Selektif

Dengan streaming, React 18 dapat menghidrasi komponen secara terpisah. Jika pengguna mengeklik elemen yang belum dihidrasi, React memprioritaskan hidrasi komponen tersebut terlebih dahulu — lalu melanjutkan bagian lainnya.

Batas Suspense sebagai Unit Streaming

Setiap batas <Suspense> adalah unit streaming. Tampilan cadangan dikirim segera, sedangkan konten sebenarnya dialirkan kemudian. Susun batas Suspense secara bertingkat agar streaming berlangsung pada tingkat perincian yang tepat.

function App() {
  return (
    <Layout>
      {/* Streams first — no data needed */}
      <Header />
      <Suspense fallback={<ArticleSkeleton />}>
        {/* Streams when article data resolves */}
        <Article />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        {/* Streams independently from Article */}
        <Comments />
      </Suspense>
    </Layout>
  );
}

Streaming Next.js dengan loading.tsx

Dalam Perute Aplikasi Next.js, loading.tsx adalah tampilan cadangan Suspense. Kerangka halaman (tata letak) dialirkan terlebih dahulu; konten halaman dialirkan setelah fungsi asinkronnya selesai.

// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
  return <ArticleSkeleton />;
}

// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
  const posts = await fetchPosts(); // data fetch happens server-side
  return <PostList posts={posts} />;
}

Komponen Klien di Dalam Suspense

Komponen Server menggunakan Suspense untuk streaming data. Komponen Klien menggunakan Suspense untuk pemuatan tertunda. Keduanya mendapat manfaat dari hidrasi selektif.

// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

Hidrasi Berdasarkan Prioritas

Jika pengguna berinteraksi dengan komponen yang belum dihidrasi (misalnya, mengekliknya), React 18 segera menghidrasi komponen tersebut terlebih dahulu, sebelum menyelesaikan hidrasi bagian lain halaman.

onShellReady vs onAllReady

onShellReady dipicu ketika kerangka halaman (bagian yang tidak ditangguhkan) siap dialirkan. onAllReady dipicu ketika semuanya telah dirender — berguna untuk pembuatan statis atau ketika Anda harus mengirim seluruh HTML sekaligus.

// For streaming (progressive rendering):
onShellReady() { pipe(res); }

// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }

Pengendali Pembatalan

Teruskan sinyal AbortController untuk membatalkan SSR pada proses render yang lambat (misalnya, ketika batas waktu terlampaui).

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

const { pipe } = renderToPipeableStream(<App />, {
  signal: controller.signal,
  onShellReady() { pipe(res); },
});

clearTimeout(timeoutId);

Mengukur Dampak Streaming

Gunakan Lighthouse atau WebPageTest untuk mengukur Waktu hingga Byte Pertama (TTFB) dan Pengecatan Konten Terbesar (LCP) sebelum dan sesudah mengaktifkan streaming, sehingga peningkatannya dapat diukur.

Pemeriksaan Singkat

Apa yang terjadi dalam hidrasi selektif React 18 ketika pengguna mengeklik elemen yang belum dihidrasi?

Ringkasan

SSR streaming menggunakan renderToPipeableStream dan batas Suspense untuk mengirim HTML secara bertahap. Setiap batas Suspense melakukan streaming secara independen. Hidrasi selektif memprioritaskan elemen yang digunakan pengguna. Dalam Next.js, loading.tsx adalah tampilan cadangan Suspense otomatis untuk streaming tingkat halaman.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Hidrasi Selektif & Streaming HTML” gratis?

Ya — teks lengkap “Hidrasi Selektif & Streaming HTML” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Hidrasi Selektif & Streaming HTML”?

Gunakan batas Suspense untuk mengalirkan potongan HTML dan menghidrasi pulau interaktif terlebih dahulu. Kamu berlatih React Academy 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy 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 3 dari 4.

Berapa lama pelajaran “Hidrasi Selektif & Streaming HTML” 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 React Academy ini?

Ya. Setiap pelajaran React Academy 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

← Kembali ke React Academy