React Academy · Pelajaran

Cara Kerja React SSR di Balik Layar

Telusuri alur renderToString/renderToPipeableStream dan cara klien melanjutkan hidrasi.

Cara Kerja React SSR di Balik Layar adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 yang Diatasi SSR

React sisi klien memerlukan JavaScript untuk merender. Pengguna melihat halaman kosong sampai JS dimuat dan dijalankan. SSR merender HTML terlebih dahulu di server sehingga pengguna dapat langsung melihat konten, sekaligus meningkatkan performa yang dirasakan dan pengoptimalan mesin telusur (SEO).

renderToString

API SSR asli: renderToString(<App />) merender pohon komponen secara sinkron menjadi teks HTML di server.

import { renderToString } from 'react-dom/server';
import App from './App';

// In an Express handler:
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body></html>
  `);
});

Hidrasi di Klien

Setelah HTML tiba, peramban menguraikannya dan merender UI. Kemudian hydrateRoot() milik React memasang pendengar peristiwa dan menjadikan HTML statis interaktif — proses ini disebut hidrasi.

// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

Apa yang Terjadi Selama Hidrasi

React menelusuri DOM yang dirender server dan DOM virtual secara bersamaan. Jika keduanya cocok, React memasang pendengar tanpa mengubah DOM. Jika berbeda, React mencatat peringatan hidrasi dan memperbaiki DOM.

renderToPipeableStream

API streaming React 18 mengirim HTML dalam beberapa potongan saat data tersedia, sehingga peramban dapat menampilkan konten secara bertahap sementara server masih memprosesnya.

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/bundle.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // starts streaming
    },
  });
});

Suspense dan Streaming

Dengan SSR streaming, batas Suspense mengalirkan tampilan cadangan terlebih dahulu, lalu menggantinya dengan konten saat data selesai diproses — tanpa menghambat pengiriman HTML awal.

// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <UserProfile /> {/* streams after data loads */}
      </Suspense>
    </Layout>
  );
}

Serialisasi Data

Data yang diambil di server harus diserialisasi dan disematkan dalam HTML agar klien dapat membacanya selama hidrasi tanpa mengambilnya kembali.

// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');

// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`

// Client hydration reads:
const data = window.__INITIAL_DATA__;

Perbedaan Lingkungan

Kode server berjalan di Node.js, bukan di peramban. Kode yang merujuk window, document, atau localStorage akan gagal di server. Lindungi dengan typeof window !== 'undefined'.

const isBrowser = typeof window !== 'undefined';

function getTheme() {
  if (!isBrowser) return 'light'; // server-safe default
  return localStorage.getItem('theme') ?? 'light';
}

Komponen Server React vs SSR

SSR merender komponen menjadi HTML pada setiap permintaan. React Server Components (RSC) berbeda — JavaScript-nya tidak pernah dikirim ke klien dan dapat bersifat asinkron, tetapi RSC memerlukan pembundel yang mendukung protokol RSC (Next.js dan sebagainya).

Manfaat Performa Streaming

SSR streaming meningkatkan Waktu hingga Byte Pertama (TTFB) untuk kerangka dan memungkinkan hidrasi selektif — peramban dapat menghidrasi bagian interaktif sebelum seluruh HTML halaman selesai dialirkan.

Pemeriksaan Singkat

Apa yang dilakukan hydrateRoot() milik React secara berbeda dari createRoot() ketika HTML server sudah tersedia?

Ringkasan

SSR menggunakan renderToPipeableStream untuk mengirim HTML sebelum JS dimuat. Klien memanggil hydrateRoot() untuk memasang pendengar peristiwa ke HTML server. SSR streaming dengan Suspense mengirim kerangka terlebih dahulu dan mengisi konten secara asinkron. Lindungi API peramban dengan typeof window !== 'undefined'.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Cara Kerja React SSR di Balik Layar” gratis?

Ya — teks lengkap “Cara Kerja React SSR di Balik Layar” 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 “Cara Kerja React SSR di Balik Layar”?

Telusuri alur renderToString/renderToPipeableStream dan cara klien melanjutkan hidrasi. 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 1 dari 4.

Berapa lama pelajaran “Cara Kerja React SSR di Balik Layar” 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