possible reason:
1. Check for invalid html tags, such as <p><p></p>, etc. Try to use <p></p> instead of <p/>
2. Scripts that change the HTML. If you have added third-party javascript files to your Vue application, these files may also change the HTML before Vue takes over and merges the HTML from the server (such as by embedding a form)
3. Different status on the server and client is the most common cause of hydration. As always, the reasons for inconsistency can vary
4. Dates, timestamps, and randomization. When you include dates or timestamps on your website, you should be careful and make it as static as possible, especially if your website is statically generated. If the client evaluates an expression like new Date() then it may differ from the date generated on the server when the same date is retrieved during deployment.
5.auth authentication: When the authentication state is only stored on the client side (e.g. local storage), the server is "unaware of authentication". This will inevitably lead to hydration issues because when you log in, the server and client information are fundamentally different. So if the server doesn't know the authentication status or your authentication status, it shouldn't render any authentication related components on the server side.
These are just some of the more common cases, there are many more edge cases that may affect you and cause inconsistencies. Not listed here, the specific problem caused depends on how your code is written.
6. Final solution: Use <client-only> (version required >2.9) or <no-ssr> tag to wrap the component (ps: the script can determine whether process.client or process.browser is a browser ) . The only drawback: This component is not included in the HTML returned by the server and does not help with SEO.
solve:
ps: The problem I encountered is that comments cannot be retained in the following structure:
{ { isAllCompReady }}
<!-- This will also cause hydration errors. Delete this comment to fix it -->
<div class="box_absolute" ></div>
Also, v-if may also affect it. You need to change v-if to v-show.
Quickly locate the components reporting hydration errors:
This error is really painful to debug.
1. To quickly get the element causing the problem, you can edit node_modules/vue/dist/vue.esm.js and add the following lines:
// Search for this line:
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
was in;
var tag = vnode.tag;
var data = vnode.data;
var children = vnode.children;
inVPre = inVPre || (data && data.pre);
vnode.elm = elm;
// Add the following lines:
console.log('elm', elm)
console.log('vnode', vnode)
console.log('inVpre', inVPre)
// ...
This will allow you to see the failed node in the console.
2. There is another way to quickly locate the wrong element
Make sure you are in development mode
Open DevTools (usually press F12)
Trigger hydration warning (usually by reloading the website)
Expand the [Vue Warn] The client side... error message to see the stack trace (depending on the browser, you can also expand the "VueJS" list that pops up)
Click on one of the hydrate calls. This will open the source code for Vue's hydration functionality.
Now, whenever the function returns, set a debugger to false. As of this writing, this has happened three times:
if (process.env.NODE_ENV !== 'production') {
if (!assertNodeMatch(elm, vnode, inVPre)) {
return false //HERE
}
}
if (process.env.NODE_ENV !== 'production' &&
typeof console !== 'undefined' &&
!hydrationBailed
) {
hydrationBailed = true;
console.warn('Parent: ', elm);
console.warn('server innerHTML: ', i);
console.warn('client innerHTML: ', elm.innerHTML);
}
return false //HERE
}
if (process.env.NODE_ENV !== 'production' &&
typeof console !== 'undefined' &&
!hydrationBailed
) {
hydrationBailed = true;
console.warn('Parent: ', elm);
console.warn('Mismatching childNodes vs. VNodes: ', elm.childNodes, children);
}
return false //HERE
}
This allows us to check the parameters of the hydration function before hydration fails
Last but not least, keep the hydration bug from happening again. Usually, this can be achieved by reloading the page, but sometimes it's more difficult.
You now see that one of our breakpoints is hit and script execution is stopped
Now open DevTool's console and write elm to get the DOM element where hydration failed. Using the DOM element you should be able to trace the hydration error back to one of the Vue components
Continue with next steps