10000 Add a note about the hydrating argument of $mount, fixes #193 (#194) · vuejs/vue2-ssr-docs@8706490 · GitHub
[go: up one dir, main page]

Skip to content

Commit 8706490

Browse files
authored
Add a note about the hydrating argument of $mount, fixes #193 (#194)
Does this make sense? 😄
1 parent 3343b81 commit 8706490

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

docs/guide/hydration.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,19 @@ Since the server has already rendered the markup, we obviously do not want to th
1313

1414
If you inspect the server-rendered output, you will notice that the app's root element has had a special attribute added:
1515

16-
``` js
16+
``` html
1717
<div id="app" data-server-rendered="true">
1818
```
1919

2020
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. Note that it didn't add `id="app"`, just the `data-server-rendered` attribute: you need to add the ID or some other selector to the app's root element yourself or the app won't hydrate properly.
2121

22+
Note that on elements without the `data-server-rendered` attribute, hydration can also be forced by passing `true` to the `hydrating` argument of `$mount`:
23+
24+
``` js
25+
// Force hydration of the app
26+
app.$mount('#app', true)
27+
```
28+
2229
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.**
2330

2431
### Hydration Caveats

0 commit comments

Comments
 (0)
0