0Pricing
Vue Academy · Lektion

Streaming-SSR mit renderToWebStream

renderToWebStream() vs. renderToString(), HTTP-Streaming, Verbesserung der TTFB und Chunk-Ausgabe

Streaming-SSR mit renderToWebStream ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Von renderToString zu Streaming

Klassisches SSR verwendet renderToString, das zunächst das gesamte HTML im Speicher erstellt, bevor ein einziges Byte gesendet wird. Der Browser wartet untätig, bis die gesamte Seite bereit ist.

Streaming-SSR sendet HTML in Chunks, während die Anwendung gerendert wird, sodass der Browser früher mit dem Parsen beginnt.

Grundlagen von renderToWebStream

Vues Server-Renderer stellt Funktionen für Streaming bereit. renderToWebStream gibt einen ReadableStream (Web Streams API) zurück, während renderToNodeStream/pipeToNodeWritable auf die Stream-Schnittstelle von Node zielen.

Jeder Chunk wird ausgegeben, sobald der Komponentenbaum aufgelöst ist.

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

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

In eine HTTP-Antwort pipen

Auf einem Node-Server pipen Sie den Stream in die Antwort. Mit pipeToNodeWritable schreiben Sie direkt in den Writable res und geben Chunks aus, sobald sie erzeugt werden.

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 in einer Web-/Edge-Laufzeitumgebung

In Edge-Laufzeitumgebungen (Workers, Deno, Bun) geben Sie direkt eine aus dem Webstream erstellte Response zurück. Node-Streams sind nicht beteiligt.

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

Wie Chunks den Browser erreichen

Während Vue Knoten rendert, schreibt es serialisierte HTML-Strings in den Stream. Die HTTP-Schicht gibt diese Bytes sofort aus. Der inkrementelle HTML-Parser des Browsers rendert sichtbaren Inhalt, bevor die Antwort abgeschlossen ist.

Deshalb sehen Sie bereits Header und Layout, während der Seiteninhalt noch gestreamt wird.

TTFB: Die wichtigste Kennzahl

TTFB (Time To First Byte) misst, wie lange es dauert, bis das erste Byte der Antwort eintrifft.

Bei renderToString umfasst die TTFB die vollständige Renderzeit. Beim Streaming verlässt der erste Chunk den Server fast sofort, wodurch die TTFB deutlich sinkt und die wahrgenommene Geschwindigkeit steigt.

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

Den Stream mit HTML für das Layout umschließen

Üblicherweise müssen Sie den Dokumentrahmen (<head>, öffnende Tags) vor dem App-Stream und die schließenden Tags danach senden. Schreiben Sie das Präfix, pipen Sie die App und schreiben Sie das Suffix, sobald der Stream endet.

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

Fehlerbehandlung während des Streamings

Sobald Bytes ausgegeben wurden, können Sie den HTTP-Statuscode nicht mehr ändern. Behandeln Sie Renderfehler über die Option onError (oder den Fehlerpfad des Writables). Bei kritischen Fehlern, die früh erkannt werden, sollten Sie ein nicht gestreamtes Rendering bevorzugen, damit Sie weiterhin einen 500-Status senden können.

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

Hydration nach dem Streaming

Gestreamtes HTML wird auf dem Client weiterhin mit createSSRApp().mount() hydratisiert. Vue fügt Listener am vorhandenen DOM ein, statt es neu zu erstellen. Das Streaming beeinflusst nur die Übertragung des Markups, nicht die Funktionsweise der Hydration.

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

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

Streaming und asynchrone Daten

Bei datenabhängigen Komponenten sollten Sie kritische Daten vor oder während des Streamings auflösen. Streaming spielt seine Stärken aus, wenn Teile des Baums unabhängig voneinander sind: Der Dokumentrahmen wird sofort gestreamt, während langsamere Bereiche gerendert werden, sobald ihre Daten verfügbar sind.

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

Wann Sie Streaming wählen sollten

Verwenden Sie Streaming für inhaltsreiche Seiten, bei denen TTFB und wahrgenommene Geschwindigkeit wichtig sind und Sie zuerst einen stabilen Dokumentrahmen senden können. Bleiben Sie bei renderToString für kleine Seiten oder wenn Sie vollständige Kontrolle über den endgültigen Statuscode und die Header benötigen.

Schnelltest

Testen Sie Ihr Verständnis von Streaming-SSR.

Zusammenfassung

Sie haben Streaming-SSR kennengelernt:

  • renderToWebStream gibt einen ReadableStream zurück; Node verwendet pipeToNodeWritable
  • Chunks werden während des Renderns des Baums ausgegeben, sodass der Browser inkrementell parsen kann
  • Dadurch sinkt die TTFB im Vergleich zum blockierenden renderToString
  • Schreiben Sie den Dokumentrahmen um den Stream herum; Fehler nach der ersten Ausgabe können den Status nicht mehr ändern
  • Die Hydration mit createSSRApp().mount() bleibt unverändert

Häufig gestellte Fragen

Ist die Lektion „Streaming-SSR mit renderToWebStream“ kostenlos?

Ja — der vollständige Text von „Streaming-SSR mit renderToWebStream“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Streaming-SSR mit renderToWebStream“?

renderToWebStream() vs. renderToString(), HTTP-Streaming, Verbesserung der TTFB und Chunk-Ausgabe Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Streaming-SSR mit renderToWebStream“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Vue-Suspense-Komponente
  2. Asynchrone Komponenten mit defineAsyncComponent
  3. Streaming-SSR mit renderToWebStream
  4. Strategien für verzögerte Hydration
← Zurück zu Vue Academy