8000 Add a note about the hydrating argument of $mount, fixes #193 by chrisvfritz · Pull Request #194 · vuejs/vue2-ssr-docs · GitHub
[go: up one dir, main page]
Skip to content

Add a note about the hydrating argument of $mount, fixes #193 #194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 1, 2018
Merged

Add a note about the hydrating argument of $mount, fixes #193 #194

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion docs/guide/hydration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,19 @@ Since the server has already rendered the markup, we obviously do not want to th

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

``` js
``` html
<div id="app" data-server-rendered="true">
```

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&# 5B3A 39;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.

Note that on elements without the `data-server-rendered` attribute, hydration can also be forced by passing `true` to the `hydrating` argument of `$mount`:

``` js
// Force hydration of the app
app.$mount('#app', true)
```

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.**

### Hydration Caveats
Expand Down
0