Vue Academy · Lektion

Streaming-SSR med renderToWebStream

renderToWebStream() vs renderToString(), HTTP-streaming, forbedring af TTFB og udsendelse af chunks

Lektion 3 af 413 trin

Streaming-SSR med renderToWebStream er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Fra renderToString til streaming

Klassisk SSR bruger renderToString, som opbygger hele HTML'en i hukommelsen, før en eneste byte sendes. Browseren må vente, indtil hele siden er klar.

Streaming-SSR sender HTML i bidder, efterhånden som appen gengives, så browseren begynder at fortolke tidligere.

Grundlæggende om renderToWebStream

Vues servergengiver tilbyder funktioner til streaming. renderToWebStream returnerer en ReadableStream (Web Streams API), mens renderToNodeStream/pipeToNodeWritable er målrettet Nodes streamgrænseflade.

Hver bid sendes videre, efterhånden som komponenttræet bliver færdigbehandlet.

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

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

Videresendelse til et HTTP-svar

I en Node-server videresender du datastrømmen til svaret. Med pipeToNodeWritable skriver du direkte til den skrivbare res, så bidderne sendes videre, efterhånden som de produceres.

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

Streaming i web- og edge-kørselsmiljøer

I edge-kørselsmiljøer (Workers, Deno, Bun) returnerer du et Response-objekt, der er bygget direkte fra webdatastrømmen. Ingen Node-datastrømme er involveret.

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

Sådan når kodebidder browseren

Når Vue gengiver noder, skubber den serialiserede HTML-strenge ind i datastrømmen. HTTP-laget sender disse bytes videre med det samme. Browserens inkrementelle HTML-fortolker gengiver synligt indhold, før svaret er færdigt.

Det er derfor, brugeren kan se sidehovedet og layoutet, mens sidens brødtekst stadig sendes som en datastrøm.

TTFB: Den vigtigste måling

TTFB (Time To First Byte) måler, hvor lang tid der går, før den første byte i svaret ankommer.

Med renderToString omfatter TTFB hele gengivelsestiden. Ved streaming forlader den første bid serveren næsten med det samme, hvilket sænker TTFB markant og forbedrer den oplevede hastighed.

// 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

Indpakning af datastrømmen med HTML-layout

Du skal normalt sende dokumentskallen (<head>, indledende tags) før appens datastrøm og de afsluttende tags bagefter. Skriv præfikset, videresend appen, og skriv derefter suffikset, når datastrømmen slutter.

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

Fejlhåndtering midt i datastrømmen

Når bytes først er sendt, kan du ikke ændre HTTP-statuskoden. Håndter gengivelsesfejl via indstillingen onError (eller den skrivbares fejlsti). Ved kritiske fejl, der opdages tidligt, bør du foretrække gengivelse uden streaming, så du stadig kan sende en 500-status.

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

Hydrering efter streaming

Streamet HTML hydreres stadig på klienten med createSSRApp().mount(). Vue tilføjer lyttere til det eksisterende DOM-træ i stedet for at oprette det igen. Streaming påvirker kun, hvordan opmærkningen leveres, ikke hvordan hydreringen fungerer.

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

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

Streaming og asynkrone data

For datastyrede komponenter skal du hente kritiske data før eller under streamingen. Streaming er effektiv, når dele af træet er uafhængige: dokumentskallen sendes straks, mens langsommere sektioner gengives, efterhånden som deres data falder på plads.

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

Hvornår du skal vælge streaming

Brug streaming til indholdstunge sider, hvor TTFB og oplevet hastighed er vigtige, og hvor du kan sende en stabil dokumentskal først. Brug renderToString til små sider, eller når du har brug for fuld kontrol over den endelige statuskode og HTTP-headere.

Hurtig kontrol

Test din forståelse af streaming-SSR.

Besvar den i den interaktive lektion

Opsummering

Du har lært om streaming-SSR:

renderToWebStream returnerer en ReadableStream, mens Node bruger pipeToNodeWritable
Bidderne sendes videre, efterhånden som træet gengives, så browseren fortolker indholdet trinvist
Det sænker TTFB sammenlignet med den blokerende renderToString
Skriv dokumentskallen rundt om datastrømmen; fejl efter den første afsendelse kan ikke ændre statuskoden
Hydrering med createSSRApp().mount() er uændret

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Streaming-SSR med renderToWebStream” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Streaming-SSR med renderToWebStream”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Streaming-SSR med renderToWebStream”?

renderToWebStream() vs renderToString(), HTTP-streaming, forbedring af TTFB og udsendelse af chunks Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Streaming-SSR med renderToWebStream”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Vue Suspense-komponenten
Asynkrone komponenter med defineAsyncComponent
Streaming-SSR med renderToWebStream
Strategier for udskudt hydrering

← Tilbage til Vue Academy