0Pricing
Vue Academy · Lezione

SSR in streaming con renderToWebStream

renderToWebStream() rispetto a renderToString(), streaming HTTP, miglioramento del TTFB, invio dei chunk.

SSR in streaming con renderToWebStream è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Da renderToString allo streaming

L'SSR classico usa renderToString, che costruisce l'intero HTML in memoria prima di inviare anche un solo byte. Il browser resta inattivo finché la pagina completa non è pronta.

L'SSR in streaming invia l'HTML in chunk mentre l'applicazione viene renderizzata, così il browser inizia prima l'analisi del documento.

Nozioni di base su renderToWebStream

Il renderer lato server di Vue offre funzioni di streaming. renderToWebStream restituisce un ReadableStream (Web Streams API), mentre renderToNodeStream/pipeToNodeWritable usano l'interfaccia degli stream di Node.

Ogni chunk viene inviato non appena l'albero dei componenti viene risolto.

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

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

Inviare lo stream in una risposta HTTP

In un server Node si invia lo stream nella risposta. Con pipeToNodeWritable si scrive direttamente nell'oggetto scrivibile res, inviando i chunk non appena vengono prodotti.

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 un runtime Web/Edge

Nei runtime edge (Workers, Deno, Bun) si restituisce direttamente una Response costruita dallo stream web. Non vengono utilizzati stream di Node.

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

Come arrivano i chunk al browser

Mentre Vue esegue il rendering dei nodi, inserisce nello stream stringhe HTML serializzate. Il livello HTTP invia immediatamente quei byte. Il parser HTML incrementale del browser visualizza il contenuto visibile prima che la risposta sia completata.

Per questo l'utente vede l'intestazione e il layout mentre il corpo della pagina è ancora in streaming.

TTFB: la metrica principale

TTFB (Time To First Byte) misura quanto tempo passa prima che arrivi il primo byte della risposta.

Con renderToString, il TTFB include l'intero tempo di rendering. Con lo streaming, il primo chunk lascia il server quasi immediatamente, riducendo drasticamente il TTFB e migliorando la velocità percepita.

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

Avvolgere lo stream nell'HTML del layout

Di solito è necessario inviare il guscio del documento (<head>, tag di apertura) prima dello stream dell'applicazione e i tag di chiusura dopo. Scriva il prefisso, invii l'applicazione nello stream, quindi scriva il suffisso quando lo stream termina.

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

Gestione degli errori durante lo streaming

Una volta inviati i byte, non è più possibile modificare il codice di stato HTTP. Gestisca gli errori di rendering tramite l'opzione onError (o il percorso degli errori dell'oggetto scrivibile). Per gli errori critici rilevati in anticipo, preferisca il rendering non in streaming, così potrà ancora inviare un 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
  }
})

Hydration dopo lo streaming

L'HTML inviato in streaming viene comunque sottoposto a hydration sul client con createSSRApp().mount(). Vue collega gli event listener al DOM esistente invece di ricrearlo. Lo streaming influisce solo sulla modalità di invio del markup, non sul funzionamento della hydration.

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

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

Streaming e dati asincroni

Per i componenti che dipendono dai dati, risolva i dati critici prima o durante lo streaming. Lo streaming è particolarmente efficace quando parti dell'albero sono indipendenti: il guscio viene inviato immediatamente, mentre le sezioni più lente vengono renderizzate quando i relativi dati sono pronti.

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

Quando scegliere lo streaming

Usi lo streaming per le pagine ricche di contenuti, quando il TTFB e la velocità percepita sono importanti e può inviare prima un guscio stabile. Preferisca renderToString per le pagine piccole o quando è necessario avere il pieno controllo sul codice di stato e sugli header finali.

Verifica rapida

Verifichi la Sua comprensione dello streaming SSR.

Riepilogo

Ha imparato lo streaming SSR:

  • renderToWebStream restituisce un ReadableStream; Node usa pipeToNodeWritable
  • i chunk vengono inviati mentre l'albero viene renderizzato, quindi il browser lo analizza progressivamente
  • questo riduce il TTFB rispetto a renderToString, che blocca l'invio
  • scriva il guscio del documento intorno allo stream; gli errori dopo il primo invio non possono modificare il codice di stato
  • la hydration con createSSRApp().mount() non cambia

Domande Frequenti

La lezione «SSR in streaming con renderToWebStream» è gratuita?

Sì — il testo completo di «SSR in streaming con renderToWebStream» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «SSR in streaming con renderToWebStream»?

renderToWebStream() rispetto a renderToString(), streaming HTTP, miglioramento del TTFB, invio dei chunk. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «SSR in streaming con renderToWebStream»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Componente Vue Suspense
  2. Componenti asincroni con defineAsyncComponent
  3. SSR in streaming con renderToWebStream
  4. Strategie di hydration differita
← Torna a Vue Academy