Vue Academy · Pelajaran

SSR Penstriman dengan renderToWebStream

renderToWebStream() berbanding renderToString(), penstriman HTTP, peningkatan TTFB, pengosongan cebisan.

Pelajaran 3 daripada 413 langkah

SSR Penstriman dengan renderToWebStream ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Daripada renderToString kepada Penstriman

SSR klasik menggunakan renderToString, yang membina keseluruhan HTML dalam memori sebelum menghantar satu bait pun. Pelayar menunggu tanpa berbuat apa-apa sehingga seluruh halaman siap.

SSR penstriman menghantar HTML dalam cebisan semasa aplikasi dipaparkan, supaya pelayar mula menghuraikannya lebih awal.

Asas renderToWebStream

Pemapar pelayan Vue menyediakan fungsi penstriman. renderToWebStream mengembalikan ReadableStream (Web Streams API), manakala renderToNodeStream/pipeToNodeWritable menyasarkan antara muka strim Node.

Setiap cebisan dikeluarkan apabila pepohon komponen selesai diselesaikan.

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

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

Menyalurkan kepada Respons HTTP

Dalam pelayan Node, anda menyalurkan strim ke dalam respons. Dengan menggunakan pipeToNodeWritable, anda menulis terus kepada boleh tulis res, sambil mengeluarkan cebisan apabila ia 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)
})

Penstriman dalam Persekitaran Masa Jalan Web/Edge

Dalam persekitaran masa jalan edge (Workers, Deno, Bun), anda mengembalikan Response yang dibina terus daripada strim web. Tiada strim Node 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' }
  })
}

Cara Cebisan Sampai kepada Pelayar

Semasa Vue memaparkan nod, ia menolak rentetan HTML bersiri ke dalam strim. Lapisan HTTP mengeluarkan bait tersebut serta-merta. Penghurai HTML berperingkat pelayar memaparkan kandungan yang kelihatan sebelum respons selesai.

Itulah sebabnya pengguna dapat melihat pengepala dan reka letak sementara isi halaman masih distrimkan.

TTFB: Metrik Utama

TTFB (Masa hingga Bait Pertama) mengukur tempoh sehingga bait pertama respons tiba.

Dengan renderToString, TTFB merangkumi keseluruhan masa pemaparan. Dengan penstriman, cebisan pertama meninggalkan pelayan hampir serta-merta, sekali gus mengurangkan TTFB dengan ketara dan meningkatkan kelajuan yang dirasai pengguna.

// 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 Strim dengan HTML Reka Letak

Biasanya anda perlu menghantar rangka dokumen (<head>, tag pembuka) sebelum strim aplikasi dan tag penutup selepasnya. Tulis awalan, salurkan aplikasi, kemudian Write akhiran apabila strim 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>')
})

Pengendalian Ralat di Pertengahan Penstriman

Selepas bait dikeluarkan, anda tidak boleh mengubah kod status HTTP. Kendalikan ralat pemaparan melalui pilihan onError (atau laluan ralat boleh tulis). Untuk kegagalan kritikal yang dikesan lebih awal, utamakan pemaparan bukan penstriman supaya anda masih boleh menghantar 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 Selepas Penstriman

HTML yang distrimkan masih dihidrasi pada klien dengan createSSRApp().mount(). Vue melampirkan pendengar kepada DOM sedia ada dan bukannya menciptanya semula. Penstriman hanya mempengaruhi cara penanda dihantar, bukan cara hidrasi berfungsi.

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

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

Penstriman dan Data Tak Segerak

Untuk komponen yang bergantung pada data, selesaikan data kritikal sebelum atau semasa penstriman. Penstriman paling berkesan apabila bahagian pepohon adalah bebas: rangka halaman distrimkan serta-merta sementara bahagian yang lebih perlahan dipaparkan apabila datanya selesai diperoleh.

// 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' }
})

Bila Memilih Penstriman

Gunakan penstriman untuk halaman yang sarat kandungan apabila TTFB dan kelajuan yang dirasai pengguna penting, serta apabila anda boleh menghantar rangka yang stabil terlebih dahulu. Kekal dengan renderToString untuk halaman kecil atau apabila anda memerlukan kawalan penuh terhadap kod status dan pengepala akhir.

Semakan Ringkas

Uji pemahaman anda tentang SSR penstriman.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari SSR penstriman:

renderToWebStream mengembalikan ReadableStream; Node menggunakan pipeToNodeWritable
Cebisan dikeluarkan semasa pepohon dipaparkan, jadi pelayar menghuraikannya secara berperingkat
Ini mengurangkan TTFB berbanding renderToString yang menyekat
Tulis rangka dokumen di sekeliling strim; ralat selepas pengeluaran pertama tidak dapat mengubah status
Hidrasi dengan createSSRApp().mount() tidak berubah

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “SSR Penstriman dengan renderToWebStream” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “SSR Penstriman dengan renderToWebStream”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “SSR Penstriman dengan renderToWebStream”?

renderToWebStream() berbanding renderToString(), penstriman HTTP, peningkatan TTFB, pengosongan cebisan. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “SSR Penstriman dengan renderToWebStream” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Komponen Vue Suspense
Komponen Tak Segerak dengan defineAsyncComponent
SSR Penstriman dengan renderToWebStream
Strategi Penghidratan Tertunda

← Kembali ke Vue Academy