SSR en flux avec renderToWebStream
renderToWebStream() et renderToString(), flux HTTP, amélioration du TTFB et envoi des fragments
SSR en flux avec renderToWebStream est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
De renderToString au rendu en flux
Le SSR classique utilise renderToString, qui construit l’intégralité du HTML en mémoire avant d’envoyer le moindre octet. Le navigateur reste en attente jusqu’à ce que toute la page soit prête.
Le SSR en flux envoie le HTML par blocs au fur et à mesure du rendu de l’application, afin que le navigateur commence son analyse plus tôt.
Principes de base de renderToWebStream
Le moteur de rendu serveur de Vue propose des fonctions de rendu en flux. renderToWebStream renvoie un ReadableStream (API Web Streams), tandis que renderToNodeStream/pipeToNodeWritable ciblent l’interface de flux de Node.
Chaque bloc est envoyé dès que l’arbre des composants est résolu.
import { renderToWebStream } from 'vue/server-renderer'
import { createSSRApp } from 'vue'
import App from './App.vue'
const app = createSSRApp(App)
const stream = renderToWebStream(app)Transmettre le flux à une réponse HTTP
Dans un serveur Node, vous transmettez le flux à la réponse. Avec pipeToNodeWritable, vous écrivez directement dans l’objet accessible en écriture res, en envoyant les blocs au fur et à mesure de leur production.
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)
})Rendu en flux dans un environnement Web ou Edge
Dans les environnements Edge (Workers, Deno, Bun), vous renvoyez directement un objet Response construit à partir du flux Web. Aucun flux Node n’est utilisé.
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' }
})
}Comment les blocs atteignent le navigateur
À mesure que Vue rend les nœuds, il pousse des chaînes HTML sérialisées dans le flux. La couche HTTP envoie immédiatement ces octets. L’analyseur HTML incrémentiel du navigateur affiche le contenu visible avant la fin de la réponse.
C’est pourquoi l’utilisateur voit l’en-tête et la mise en page alors que le corps de la page est encore transmis en flux.
TTFB : la métrique clé
TTFB (durée avant le premier octet) mesure le temps nécessaire avant l’arrivée du premier octet de la réponse.
Avec renderToString, le TTFB inclut toute la durée du rendu. Avec le rendu en flux, le premier bloc quitte presque immédiatement le serveur, ce qui réduit considérablement le TTFB et améliore la rapidité perçue.
// 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 chunksEntourer le flux avec le HTML de mise en page
Vous devez généralement envoyer l’ossature du document (<head>, balises ouvrantes) avant le flux de l’application, puis les balises fermantes après celui-ci. Écrivez le préfixe, transmettez l’application, puis écrivez le suffixe lorsque le flux se termine.
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>')
})Gérer les erreurs en cours de flux
Une fois les octets envoyés, vous ne pouvez plus modifier le code d’état HTTP. Gérez les erreurs de rendu via l’option onError (ou le chemin d’erreur de l’objet accessible en écriture). Pour les échecs critiques détectés tôt, préférez un rendu sans flux afin de pouvoir encore envoyer une réponse 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
}
})Hydratation après le rendu en flux
Le HTML transmis en flux est toujours hydraté côté client avec createSSRApp().mount(). Vue attache les écouteurs au DOM existant au lieu de le recréer. Le rendu en flux ne change que la manière dont le balisage est transmis, pas le fonctionnement de l’hydratation.
// client entry
import { createSSRApp } from 'vue'
import App from './App.vue'
createSSRApp(App).mount('#app') // hydrates streamed markupRendu en flux et données asynchrones
Pour les composants dépendant de données, résolvez les données critiques avant ou pendant le rendu en flux. Le rendu en flux est particulièrement efficace lorsque certaines parties de l’arbre sont indépendantes : l’ossature est transmise immédiatement tandis que les sections plus lentes sont rendues au fur et à mesure de la résolution de leurs données.
// 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' }
})Quand choisir le rendu en flux
Utilisez le rendu en flux pour les pages riches en contenu lorsque le TTFB et la rapidité perçue sont importants, et lorsque vous pouvez d’abord envoyer une ossature stable. Préférez renderToString pour les petites pages ou lorsque vous avez besoin d’un contrôle total sur le code d’état et les en-têtes finaux.
Vérification rapide
Testez votre compréhension du SSR en flux.
Récapitulatif
Vous avez appris le SSR en flux :
renderToWebStreamrenvoie un ReadableStream ; Node utilisepipeToNodeWritable- les blocs sont envoyés au fur et à mesure du rendu de l’arbre, afin que le navigateur l’analyse progressivement
- cela réduit le TTFB par rapport au
renderToStringbloquant - écrivez l’ossature du document autour du flux ; les erreurs survenant après le premier envoi ne peuvent plus modifier le code d’état
- l’hydratation avec
createSSRApp().mount()reste inchangée
Questions Fréquemment Posées
La leçon « SSR en flux avec renderToWebStream » est-elle gratuite ?
Oui — le texte complet de « SSR en flux avec renderToWebStream » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « SSR en flux avec renderToWebStream » ?
renderToWebStream() et renderToString(), flux HTTP, amélioration du TTFB et envoi des fragments Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « SSR en flux avec renderToWebStream » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composant Vue Suspense
- Composants asynchrones avec defineAsyncComponent
- SSR en flux avec renderToWebStream
- Stratégies d’hydratation différée