From 613018d3e5aec345e73114ee8b716b70965c1b54 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 17 Jul 2017 11:17:51 +0200 Subject: [PATCH 1/2] Traduction de `streaming.md` Signed-off-by: Bruno Lesieur --- en/SUMMARY.md | 2 +- en/streaming.md | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/en/SUMMARY.md b/en/SUMMARY.md index c809a5ff..6128bc7b 100644 --- a/en/SUMMARY.md +++ b/en/SUMMARY.md @@ -9,7 +9,7 @@ - [Gestion des CSS](css.md) - [Gestion des entêtes (En)](head.md) - [Mise en cache (En)](caching.md) -- [Envoi par flux (En)](streaming.md) +- [Envoi par flux](streaming.md) - [Réference de l'API (En)](api.md) - [createRenderer (En)](api.md#createrendereroptions) - [createBundleRenderer (En)](api.md#createbundlerendererbundle-options) diff --git a/en/streaming.md b/en/streaming.md index a30f9af4..c6aee32a 100644 --- a/en/streaming.md +++ b/en/streaming.md @@ -1,12 +1,13 @@ -# Envoi par flux (En)

*Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).* +# Envoi par flux -`vue-server-renderer` supports stream rendering out of the box, for both the base renderer and the bundle renderer. All you need to do is use `renderToStream` instead of `renderToString`: +`vue-server-renderer` supporte nativement le rendu par flux (« stream »), aussi bien pour le moteur de rendu de base que pour le moteur de rendu de paquetage. Tout ce dont vous avez besoin est d'utiliser `renderToStream` à la place de `renderToString`: +: ``` js const stream = renderer.renderToStream(context) ``` -The returned value is a [Node.js stream](https://nodejs.org/api/stream.html): +La valeur retournée est un [flux Node.js](https://nodejs.org/api/stream.html) : ``` js let html = '' @@ -24,10 +25,10 @@ stream.on('error', err => { }) ``` -## Streaming Caveats +## Limitations de flux -In stream rendering mode, data is emitted as soon as possible when the renderer traverses the Virtual DOM tree. This means we can get an earlier "first chunk" and start sending it to the client faster. +En mode de rendu par flux, la donnée est émise aussitôt que possible quand le moteur parcours l'arbre du DOM virtuel. Cela signifie que l'envoi au client du « premier fragment » commence rapidement. -However, when the first data chunk is emitted, the child components may not even be instantiated yet, neither will their lifecycle hooks get called. This means if the child components need to attach data to the render context in their lifecycle hooks, these data will not be available when the stream starts. Since a lot of the context information (like head information or inlined critical CSS) needs to be appear before the application markup, we essentially have to wait until the stream to complete before we can start making use of these context data. +Cependant, quand le premier fragment est émis, les composants enfants peuvent ne pas avoir encore été instanciés, ni même leur cycle de vie appelé. Cela signifie que si des composants enfants on besoin d'attacher leurs données dans le contexte de rendu de leurs hooks de cycle de vie, elles ne seront pas accessible au démarrage du flux. Comme beaucoup d'informations (comme les informations d'entête ou les CSS critique injectée) ont besoin d'être inséré avant la balise de l'application, il est nécessaire d'attendre la fin du flux avant de commencer à utiliser ces données de contexte. -It is therefore **NOT** recommended to use streaming mode if you rely on context data populated by component lifecycle hooks. +Il est n'est donc **PAS** recommandé d'utiliser de l'envoi par flux si les données de vos contextes sont injectés dans les hooks du cycle de vie. From 71efc0cb7804169b859ff0bfd98c6607752f886d Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 22 Jul 2017 09:47:42 +0200 Subject: [PATCH 2/2] Relecture de @Kocal et @Haeresis Signed-off-by: Bruno Lesieur --- en/streaming.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/en/streaming.md b/en/streaming.md index c6aee32a..4a91254a 100644 --- a/en/streaming.md +++ b/en/streaming.md @@ -1,6 +1,6 @@ # Envoi par flux -`vue-server-renderer` supporte nativement le rendu par flux (« stream »), aussi bien pour le moteur de rendu de base que pour le moteur de rendu de paquetage. Tout ce dont vous avez besoin est d'utiliser `renderToStream` à la place de `renderToString`: +`vue-server-renderer` supporte nativement le rendu par flux (« stream »), aussi bien pour le moteur de rendu de base que pour le moteur de rendu de paquetage. Tout ce dont vous avez besoin est d'utiliser `renderToStream` à la place de `renderToString` : : ``` js @@ -27,8 +27,8 @@ stream.on('error', err => { ## Limitations de flux -En mode de rendu par flux, la donnée est émise aussitôt que possible quand le moteur parcours l'arbre du DOM virtuel. Cela signifie que l'envoi au client du « premier fragment » commence rapidement. +En mode de rendu par flux, la donnée est émise aussitôt que possible quand le moteur parcourt l'arbre du DOM virtuel. Cela signifie que l'envoi au client du « premier fragment » commence rapidement. -Cependant, quand le premier fragment est émis, les composants enfants peuvent ne pas avoir encore été instanciés, ni même leur cycle de vie appelé. Cela signifie que si des composants enfants on besoin d'attacher leurs données dans le contexte de rendu de leurs hooks de cycle de vie, elles ne seront pas accessible au démarrage du flux. Comme beaucoup d'informations (comme les informations d'entête ou les CSS critique injectée) ont besoin d'être inséré avant la balise de l'application, il est nécessaire d'attendre la fin du flux avant de commencer à utiliser ces données de contexte. +Cependant, quand le premier fragment est émis, les composants enfants peuvent ne pas avoir encore été instanciés, et les hooks de leur cycle de vie ne seront jamais appelés. Cela signifie que si des composants enfants ont besoin d'attacher leurs données dans le contexte de rendu de leurs hooks de cycle de vie, elles ne seront pas accessibles au démarrage du flux. Comme beaucoup d'informations (comme les informations d'entête ou les CSS critiques injectées) ont besoin d'être insérées avant la balise de l'application, il est nécessaire d'attendre la fin du flux avant de commencer à utiliser ces données de contexte. -Il est n'est donc **PAS** recommandé d'utiliser de l'envoi par flux si les données de vos contextes sont injectés dans les hooks du cycle de vie. +Il n'est donc **PAS** recommandé d'utiliser de l'envoi par flux si les données de vos contextes sont injectés dans les hooks du cycle de vie.