Vue Academy · Pelajaran

SSR Streaming dengan renderToWebStream

renderToWebStream() vs renderToString(), streaming HTTP, peningkatan TTFB, serta pengiriman chunk.

SSR Streaming dengan renderToWebStream adalah pelajaran Vue 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Dari renderToString ke Pengaliran

SSR klasik menggunakan renderToString, yang membangun seluruh HTML di memori sebelum mengirim satu bita pun. Peramban menunggu tanpa melakukan apa-apa hingga seluruh halaman siap.

SSR dengan pengaliran mengirim HTML dalam potongan saat aplikasi dirender, sehingga peramban mulai menguraikannya lebih awal.

Dasar-Dasar renderToWebStream

Perender server Vue menyediakan fungsi pengaliran. renderToWebStream mengembalikan ReadableStream (API Aliran Web), sedangkan renderToNodeStream/pipeToNodeWritable menargetkan antarmuka aliran Node.

Setiap potongan dikirim saat pohon komponen selesai diproses.

import { renderToWebStream } from 'vue/server-renderer'
import { createSSRApp } from 'vue'
import App from './App.vue'

const app = createSSRApp(App)
const stream = renderToWebStream(app)

Mengalirkan ke Respons HTTP

Di server Node, Anda menyalurkan aliran ke dalam respons. Dengan pipeToNodeWritable, Anda menulis langsung ke objek tulis res, sambil mengirimkan potongan saat dihasilkan.

import { pipeToNodeWritable } from 'vue/server-renderer'

server.get('*', (req, res) => {
  const app = createSSRApp(App)
  res.write('<!DOCTYPE html><html><body><div id="app">')
  pipeToNodeWritable(app, {}, res)
})

Pengaliran di Lingkungan Eksekusi Web/Edge

Di lingkungan eksekusi edge (Workers, Deno, Bun), Anda langsung mengembalikan Response yang dibuat dari aliran web. Tidak ada aliran Node yang terlibat.

import { renderToWebStream } from 'vue/server-renderer'

export default async function handler(request) {
  const app = createSSRApp(App)
  const stream = renderToWebStream(app)
  return new Response(stream, {
    headers: { 'Content-Type': 'text/html' }
  })
}

Bagaimana Potongan Mencapai Peramban

Saat Vue merender simpul, Vue mendorong string HTML terserialisasi ke dalam aliran. Lapisan HTTP langsung mengirimkan bita tersebut. Pengurai HTML inkremental milik peramban merender konten yang terlihat sebelum respons selesai.

Inilah sebabnya pengguna dapat melihat tajuk dan tata letak saat isi halaman masih dialirkan.

TTFB: Metrik Utama

TTFB (Waktu hingga Bita Pertama) mengukur waktu hingga bita respons pertama tiba.

Dengan renderToString, TTFB mencakup seluruh waktu perenderan. Dengan pengaliran, potongan pertama meninggalkan server hampir seketika, sehingga TTFB turun drastis dan kecepatan yang dirasakan meningkat.

// renderToString: client waits for full HTML
const html = await renderToString(app) // blocks
res.end(fullPage(html))

// streaming: first bytes flush right away
pipeToNodeWritable(app, {}, res) // non-blocking chunks

Membungkus Aliran dengan HTML Tata Letak

Biasanya Anda perlu mengirim kerangka dokumen (<head>, tag pembuka) sebelum aliran aplikasi dan tag penutup setelahnya. Tulis awalan, salurkan aplikasi, lalu tulis akhiran saat aliran berakhir.

res.write('<!DOCTYPE html><head><title>App</title></head>')
res.write('<body><div id="app">')

pipeToNodeWritable(app, ctx, {
  write: (chunk) => res.write(chunk),
  end: () => res.end('</div></body></html>')
})

Penanganan Kesalahan di Tengah Pengaliran

Setelah bita dikirim, Anda tidak dapat mengubah kode status HTTP. Tangani kesalahan perenderan melalui opsi onError (atau jalur kesalahan objek tulis). Untuk kegagalan kritis yang terdeteksi lebih awal, pilih perenderan tanpa pengaliran agar Anda masih dapat mengirim 500.

pipeToNodeWritable(app, ctx, {
  write: (c) => res.write(c),
  end: () => res.end(suffix),
  destroy: (err) => {
    console.error('Stream failed:', err)
    res.end() // status already sent
  }
})

Hidrasi Setelah Pengaliran

HTML hasil pengaliran tetap dihidrasi di klien dengan createSSRApp().mount(). Vue memasang pendengar ke DOM yang sudah ada, bukan membuatnya ulang. Pengaliran hanya memengaruhi cara markah dikirim, bukan cara hidrasi bekerja.

// client entry
import { createSSRApp } from 'vue'
import App from './App.vue'

createSSRApp(App).mount('#app') // hydrates streamed markup

Pengaliran dan Data Asinkron

Untuk komponen yang bergantung pada data, selesaikan data penting sebelum atau selama pengaliran. Pengaliran sangat bermanfaat saat bagian-bagian pohon tidak saling bergantung: kerangka halaman langsung dialirkan, sementara bagian yang lebih lambat dirender setelah datanya tersedia.

// fetch critical data, then stream the rest
const app = createSSRApp(App, { initialData })
const stream = renderToWebStream(app)
return new Response(stream, {
  headers: { 'Content-Type': 'text/html' }
})

Kapan Memilih Pengaliran

Gunakan pengaliran untuk halaman yang kaya konten, ketika TTFB dan kecepatan yang dirasakan penting, serta Anda dapat mengirim kerangka halaman yang stabil terlebih dahulu. Tetap gunakan renderToString untuk halaman kecil atau saat Anda memerlukan kendali penuh atas kode status dan header akhir.

Uji Cepat

Uji pemahaman Anda tentang SSR dengan pengaliran.

Ringkasan

Anda mempelajari SSR dengan pengaliran:

renderToWebStream mengembalikan ReadableStream; Node menggunakan pipeToNodeWritable
Potongan dikirim saat pohon dirender, sehingga peramban menguraikannya secara bertahap
Ini menurunkan TTFB dibandingkan renderToString yang bersifat memblokir
Tulis kerangka dokumen di sekeliling aliran; kesalahan setelah pengiriman pertama tidak dapat mengubah status
Hidrasi dengan createSSRApp().mount() tidak berubah

Pertanyaan yang Sering Diajukan

Apakah pelajaran “SSR Streaming dengan renderToWebStream” gratis?

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

Apa yang akan aku pelajari di “SSR Streaming dengan renderToWebStream”?

renderToWebStream() vs renderToString(), streaming HTTP, peningkatan TTFB, serta pengiriman chunk. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 “SSR Streaming dengan renderToWebStream” 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 Vue Academy ini?

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

Komponen Suspense Vue
Komponen Asinkron dengan defineAsyncComponent
SSR Streaming dengan renderToWebStream
Strategi Hydration Tertunda

← Kembali ke Vue Academy