Skip to content

Commit 117a405

Browse files
committed
Translate hydration.md
Signed-off-by: Bruno Lesieur <[email protected]>
1 parent 19c3e06 commit 117a405

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

en/hydration.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
# Hydratation côté client (En) <br><br> *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).*
1+
# Hydratation côté client
22

3-
In `entry-client.js`, we are simply mounting the app with this line:
3+
Dans `entry-client.js`, nous montons simplement l'application avec cette ligne :
44

55
``` js
6-
// this assumes App.vue template root element has id="app"
6+
// supposons que l'élément racine du template App.vue possède `id="app"`
77
app.$mount('#app')
88
```
99

10-
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.
10+
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.
1111

12-
If you inspect the server-rendered output, you will notice that the app's root element has a special attribute:
12+
Si vous inspectez la sortie rendu côté serveur, vous remarquerez que l'élément racine a un attribut spécial :
1313

1414
``` js
1515
<div id="app" data-server-rendered="true">
1616
```
1717

18-
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.
18+
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.
1919

20-
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.**
20+
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.**
2121

22-
### Hydration Caveats
22+
### Limitation de l'hydration
2323

24-
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:
24+
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 :
2525

2626
``` html
2727
<table>
2828
<tr><td>hi</td></tr>
2929
</table>
3030
```
3131

32-
The browser will automatically inject `<tbody>` inside `<table>`, however, the virtual DOM generated by Vue does not contain `<tbody>`, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates.
32+
Le navigateur va automatiquement injecter `<tbody>` dans `<table>`, cependant, le DOM virtuel généré par Vue ne contient pas `<tbody>`, ce qui va causer une non concordance. Pour assurer une concordance correcte, assurez vous d'écrire du HTML valide dans vos templates.

0 commit comments

Comments
 (0)