From 117a405d5a641e016e4b4a9faec960987ce0366c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 2 Jun 2017 15:04:01 +0200 Subject: [PATCH 1/3] Translate `hydration.md` Signed-off-by: Bruno Lesieur --- en/hydration.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/en/hydration.md b/en/hydration.md index d87b0688..10a085e8 100644 --- a/en/hydration.md +++ b/en/hydration.md @@ -1,27 +1,27 @@ -# Hydratation côté client (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).* +# Hydratation côté client -In `entry-client.js`, we are simply mounting the app with this line: +Dans `entry-client.js`, nous montons simplement l'application avec cette ligne : ``` js -// this assumes App.vue template root element has id="app" +// supposons que l'élément racine du template App.vue possède `id="app"` app.$mount('#app') ``` -Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive. +Parceque le serveur a déjà fait le rendu des balises, nous ne voulons évidemment pas tout jeter et recréer l'intégralité des éléments du DOM. À la place, nous voulons « hydrater » les balises statiques et les rendres intéractives. -If you inspect the server-rendered output, you will notice that the app's root element has a special attribute: +Si vous inspectez la sortie rendu côté serveur, vous remarquerez que l'élément racine a un attribut spécial : ``` js
``` -The `data-server-rendered` special attribute lets the client-side Vue know that the markup is rendered by the server and it should mount in hydration mode. +L'attribut spécial `data-server-rendered` permet à Vue depuis le côté client de savoir quel balise a été rendue par le serveur et d'être capable de monter l'application en mode hydratation. -In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. **In production mode, this assertion is disabled for maximum performance.** +En mode développement, Vue va vérifier que le DOM virtuel généré côté client concorde avec la structure du DOM rendu par le serveur. S'il y a non concordance, il va passer l'hydratation, retirer le DOM existant et faire le rendu depuis le début. **En mode production, ces vérifications son désactivés pour des performances maximales.** -### Hydration Caveats +### Limitation de l'hydration -One thing to be aware of when using SSR + client hydration is some special HTML structures that may be altered by the browser. For example, when you write this in a Vue template: +Une chose qu'il faut savoir est qu'en utilisant un SSR + une hydratation côté client il y a plusieurs structures HTML spéciales qui sont altérées par le navigateur. Par exemple, quand vous écrivez ceci dans un template Vue : ``` html @@ -29,4 +29,4 @@ One thing to be aware of when using SSR + client hydration is some special HTML
``` -The browser will automatically inject `` inside ``, however, the virtual DOM generated by Vue does not contain ``, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates. +Le navigateur va automatiquement injecter `` dans `
`, cependant, le DOM virtuel généré par Vue ne contient pas ``, ce qui va causer une non concordance. Pour assurer une concordance correcte, assurez vous d'écrire du HTML valide dans vos templates. From bc420e7888c24e56eef8a89df4be8c01cae9b950 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 2 Jun 2017 16:41:31 +0200 Subject: [PATCH 2/3] Update hydration.md translation Signed-off-by: Bruno Lesieur --- en/hydration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/en/hydration.md b/en/hydration.md index 10a085e8..4ae79cf4 100644 --- a/en/hydration.md +++ b/en/hydration.md @@ -9,15 +9,15 @@ app.$mount('#app') Parceque le serveur a déjà fait le rendu des balises, nous ne voulons évidemment pas tout jeter et recréer l'intégralité des éléments du DOM. À la place, nous voulons « hydrater » les balises statiques et les rendres intéractives. -Si vous inspectez la sortie rendu côté serveur, vous remarquerez que l'élément racine a un attribut spécial : +Si vous inspectez le rendu en sortie côté serveur, vous remarquerez que l'élément racine a un attribut spécial : ``` js
``` -L'attribut spécial `data-server-rendered` permet à Vue depuis le côté client de savoir quel balise a été rendue par le serveur et d'être capable de monter l'application en mode hydratation. +L'attribut spécial `data-server-rendered` permet à Vue, depuis le côté client, de savoir quelle balise a été rendue par le serveur et d'être capable de monter l'application en mode hydratation. -En mode développement, Vue va vérifier que le DOM virtuel généré côté client concorde avec la structure du DOM rendu par le serveur. S'il y a non concordance, il va passer l'hydratation, retirer le DOM existant et faire le rendu depuis le début. **En mode production, ces vérifications son désactivés pour des performances maximales.** +En mode développement, Vue va vérifier que le DOM virtuel généré côté client concorde avec la structure du DOM rendu par le serveur. S'il y a non concordance, il va bypasser l'hydratation, retirer le DOM existant et refaire le rendu depuis le début. **En mode production, ces vérifications sont désactivés pour des performances maximales.** ### Limitation de l'hydration @@ -29,4 +29,4 @@ Une chose qu'il faut savoir est qu'en utilisant un SSR + une hydratation côté
``` -Le navigateur va automatiquement injecter `` dans ``, cependant, le DOM virtuel généré par Vue ne contient pas ``, ce qui va causer une non concordance. Pour assurer une concordance correcte, assurez vous d'écrire du HTML valide dans vos templates. +Le navigateur va automatiquement injecter `` dans `
`. Le DOM virtuel généré par Vue ne va cependant pas contenir ``, ce qui va causer une non concordance. Pour assurer une concordance correcte, assurez-vous d'écrire du HTML valide dans vos templates. From 0bafb91669f7f15c2e573407a628f19bdde57ca6 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 3 Jun 2017 11:08:48 +0200 Subject: [PATCH 3/3] Seconde relecture et ajout de @kocal Signed-off-by: Bruno Lesieur --- en/hydration.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/hydration.md b/en/hydration.md index 4ae79cf4..54555261 100644 --- a/en/hydration.md +++ b/en/hydration.md @@ -7,7 +7,7 @@ Dans `entry-client.js`, nous montons simplement l'application avec cette ligne : app.$mount('#app') ``` -Parceque le serveur a déjà fait le rendu des balises, nous ne voulons évidemment pas tout jeter et recréer l'intégralité des éléments du DOM. À la place, nous voulons « hydrater » les balises statiques et les rendres intéractives. +Parceque le serveur a déjà fait le rendu des balises, nous ne voulons évidemment pas tout jeter et recréer l'intégralité des éléments du DOM. À la place, nous voulons « hydrater » les balises statiques et les rendre intéractives. Si vous inspectez le rendu en sortie côté serveur, vous remarquerez que l'élément racine a un attribut spécial : @@ -17,7 +17,7 @@ Si vous inspectez le rendu en sortie côté serveur, vous remarquerez que l'él L'attribut spécial `data-server-rendered` permet à Vue, depuis le côté client, de savoir quelle balise a été rendue par le serveur et d'être capable de monter l'application en mode hydratation. -En mode développement, Vue va vérifier que le DOM virtuel généré côté client concorde avec la structure du DOM rendu par le serveur. S'il y a non concordance, il va bypasser l'hydratation, retirer le DOM existant et refaire le rendu depuis le début. **En mode production, ces vérifications sont désactivés pour des performances maximales.** +En mode développement, Vue va vérifier que le DOM virtuel généré côté client concorde avec la structure du DOM rendu par le serveur. S'il y a non concordance, il va bypasser l'hydratation, retirer le DOM existant et refaire le rendu depuis le début. **En mode production, ces vérifications sont désactivées pour des performances maximales.** ### Limitation de l'hydration @@ -25,7 +25,7 @@ Une chose qu'il faut savoir est qu'en utilisant un SSR + une hydratation côté ``` html
- +
hi
salut
```