text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[139],{"8f26":function(e,t,a){"use strict";a.r(t);var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("doc-page",{attrs:{title:"Client Side Hydration",nav:e.nav}},[a("p",[e._v("Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.")]),a("p",[e._v("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.")]),a("div",{staticClass:"doc-note doc-note--warning"},[a("p",{staticClass:"doc-note__title"},[e._v("WARNING")]),a("p",[e._v("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. "),a("strong",[e._v("In production mode, this assertion is disabled for maximum performance.")])])]),a("h2",{staticClass:"doc-heading doc-h2",attrs:{id:"Hydration-Caveats"},on:{click:function(t){return e.copyHeading("Hydration-Caveats")}}},[e._v("Hydration Caveats")]),a("p",[e._v("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:")]),a("pre",{pre:!0,attrs:{class:"doc-code language-html"}},[a("code",{pre:!0,attrs:{class:"doc-code__inner doc-code__inner--prerendered language-html"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),e._v("table")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),e._v("tr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),e._v("td")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),e._v("hi"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("</")]),e._v("td")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("</")]),e._v("tr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("</")]),e._v("table")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),e._v("\n")])]),a("p",[e._v("The browser will automatically inject "),a("code",{staticClass:"doc-token"},[e._v("<tbody>")]),e._v(" inside "),a("code",{staticClass:"doc-token"},[e._v("<table>")]),e._v(", however, the virtual DOM generated by Vue does not contain "),a("code",{staticClass:"doc-token"},[e._v("<tbody>")]),e._v(", so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates.")]),a("h2",{staticClass:"doc-heading doc-h2",attrs:{id:"Handling-Hydration-Errors"},on:{click:function(t){return e.copyHeading("Handling-Hydration-Errors")}}},[e._v("Handling Hydration Errors")]),a("p",[e._v("If you do receive hydration errors (as seen in console: “Vuejs Error - The client-side rendered virtual DOM tree is not matching server-rendered content”), you can try following these steps:")]),a("ol",[a("li",[e._v("Show DevTools in Chrome (F12)")]),a("li",[e._v("Load the page that causes “the client-side rendered virtual DOM tree…” warning.")]),a("li",[e._v("Scroll to the warning in DevTools console.")]),a("li",[e._v("Click at the source location hyperlink of the warning in vue.runtime.esm.js.")]),a("li",[e._v("Set a breakpoint there (left-clicking at line number in the source code browser).")]),a("li",[e._v("Make the same warning appear again. Usually by reloading the page. If there are many warnings, you can check the message by moving a mouse over "),a("code",{staticClass:"doc-token"},[e._v("msg")]),e._v(" variable.")]),a("li",[e._v("When you have found your message and stopped on a breakpoint, look at the "),a("em",[e._v("call stack")]),e._v(". Click one frame down to call to “patch” to open its source. Hover mouse over hydrate function call 4 lines above the execution line in patch. Hyperlink to the source of hydrate would open.")]),a("li",[e._v("In the hydrate function, move about 15 lines from the start and set a breakpoint where false is returned after "),a("code",{staticClass:"doc-token"},[e._v("assertNodeMatch")]),e._v(" returned "),a("code",{staticClass:"doc-token"},[e._v("false")]),e._v(". Set the breakpoint there and remove all other breakpoints.")]),a("li",[e._v("Make the same warning happen again. Now, when breakpoint is hit, execution should stop in the hydrate function. Switch to DevTools console and evaluate "),a("code",{staticClass:"doc-token"},[e._v("elm")]),e._v(" and then "),a("code",{staticClass:"doc-token"},[e._v("vnode")]),e._v(". Here "),a("code",{staticClass:"doc-token"},[e._v("elm")]),e._v(" seems to be a "),a("em",[e._v("server-rendered DOM element")]),e._v(" while "),a("code",{staticClass:"doc-token"},[e._v("vnode")]),e._v(" is a "),a("em",[e._v("virtual DOM node")]),e._v(". "),a("code",{staticClass:"doc-token"},[e._v("Elm")]),e._v(" is printed as HTML so you can figure out where the error happened.")])])])},s=[],r=a("8669"),o="Client Side Hydration | Quasar Framework",i="What hydration is and its caveats in a Quasar server-side rendered app.",c={meta:{title:"Client Side Hydration",meta:{title:{name:"title",content:o},ogTitle:{name:"og:title",content:o},twitterTitle:{name:"twitter:title",content:o},description:{name:"description",content:i},ogDesc:{name:"og:description",content:i},twitterDesc:{name:"twitter:description",content:i}}},preFetch:function(e){var t=e.store;t.commit("updateToc",[{id:"Hydration-Caveats",title:"Hydration Caveats"},{id:"Handling-Hydration-Errors",title:"Handling Hydration Errors"}])},created:function(){this.nav=[{name:"SEO for SSR",category:"Developing SSR",path:"/quasar-cli/developing-ssr/seo-for-ssr",dir:"left"},{name:"Handling 404 and 500 Errors",category:"Developing SSR",path:"/quasar-cli/developing-ssr/handling-404-and-500-errors",dir:"right"}]},methods:{copyHeading:r["a"]}},l=c,d=a("2877"),p=Object(d["a"])(l,n,s,!1,null,null,null);t["default"]=p.exports}}]);