vue-ssr-docshydration.md at master · vuejsvue | hydration vue
Hydrationreferstotheclient-sideprocessduringwhichVuetakesoverthestaticHTMLsentbytheserverandturnsitintodynamicDOMthatcanreacttoclient-sidedatachanges.Inentry-client.js,wearesimplymountingtheappwiththisline://thisassumesApp.vuetemplaterootelementhas`id="app"`app.$mount(#app)Sincetheserverhasalreadyrenderedthemarkup,weobviouslydonotwanttothrowthatawayandre-createalltheDOMelements.Instead,wewantto"hydrate"thestaticmarkupandmakeitinteractive.Ifyouinspecttheserver-renderedoutput,youwillnoticethat...
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.
In entry-client.js, we are simply mounting the app with this line:
// this assumes App.vue template root element has `id="app"` app.$mount(#app)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.
If you inspect the server-rendered output, you will notice that the apps root element has had a special attribute added:
<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 didnt add id="app", just the data-server-render...