0

How to perform a full force rehydration ? This happens all the time when there's a if clause for which I use the variable to lazy request only on client side . It stops the entire client side app running(Hydrating) on Production when it encounters this error !

I need it do a Full Re-Hydration on the app if it is ever necessary Just Like in development mode which works perfectly fine! Note that on elements without the data-server-rendered attribute, hydration can also be forced by passing true to the hydrating argument of $mount

Bright Chip
  • 31
  • 1
  • 4

1 Answers1

0

You can avoid the error by doing one of:

  • Adjusting your markup so that the error doesn't happen. I've seen this error when rendering <table>s without a <thead> and <tbody>. Adding the missing markup can fix the issue.
  • Wrapping your affected markup with <client-only> to purposely render a tag or component only on client-side
Collin Allen
  • 4,449
  • 3
  • 37
  • 52
  • Because I really have no way to fix it and I decided to find a way to force rehyration. – Bright Chip Oct 30 '20 at 08:33
  • The error didn't throw until I wrap my complete page component in And it warns me the error in the console in dev mode Even though there's a empty
    .
     – Bright Chip Oct 30 '20 at 08:34
  • If you're going to wrap your whole page in , you might as well not even use SSR. I'd try to narrow down the markup to the portion that has the error by temporarily removing chunks of the page until the error doesn't happen, then fixing the specific issue. Nuxt doesn't raise the non-matching error out of the box, so some portion of your app is causing it. Wrapping the portion of the page with is kind of a band aid in this situation. – Collin Allen Oct 31 '20 at 04:08
  • I found the problem only for my project as I was using Vue ssr rather than Nux. \n And the solution is replacing the "serverPrefetch" into "fetch" . The errors seem tb disappeared in most caes – Bright Chip Oct 31 '20 at 06:26