You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/hydration.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -9,15 +9,15 @@ app.$mount('#app')
9
9
10
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.
11
11
12
-
Si vous inspectez la sortie rendu côté serveur, vous remarquerez que l'élément racine a un attribut spécial :
12
+
Si vous inspectez le rendu en sortie côté serveur, vous remarquerez que l'élément racine a un attribut spécial :
13
13
14
14
```js
15
15
<div id="app" data-server-rendered="true">
16
16
```
17
17
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.
18
+
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.
19
19
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.**
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 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.**
21
21
22
22
### Limitation de l'hydration
23
23
@@ -29,4 +29,4 @@ Une chose qu'il faut savoir est qu'en utilisant un SSR + une hydratation côté
29
29
</table>
30
30
```
31
31
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, assurezvous d'écrire du HTML valide dans vos templates.
32
+
Le navigateur va automatiquement injecter `<tbody>` dans `<table>`. Le DOM virtuel généré par Vue ne va cependant pas contenir `<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