Disable client hydration in Nuxt.js or Stop exposing raw data in Nuxt.js

Question

I creating a Web App that using Nuxt.js, with Server-Side Rendering.

I don't want expose my backend data, so I tried to use asyncData and Axios to request to my backend server.

But the Nuxt.js exposed my backend data to client with window.__NUXT__.data variable.

I tried remove this by using render:route hook, But It says

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside p, or missing . Bailing hydration and performing full client-side render.

So I tried remove the script that making not matching error, But It makes stop working script at my site.

So the question: How to disable the client hydration(client-side virtual DOM tree rendering)? or How to stop exposing raw data?

I used asyncData with this code:

asyncData ({ params, error }: { params: { id: string }, error: Function }) {
  return axios.post('(backend)', data).then(res => res.data ? ({ data: res.data }) : error({ statusCode: 400, message: 'Bad request' }));
}

Answer 1

You cannot stop the hydration of your SSR'ed content (not yet at least, it is planned to server only static content pretty soon tho).
Nuxt is aimed to add SSR to your day to day VueJS SPA. If you don't want the hydration, you're probably using the wrong framework here anyway.
Astro may be a better fit, to name just one. You could find more here too.

---

The DOM mismatch issue is explained here (reasons + solution).

---

How to hide things on the client side?

Short answer: you can't.
Long answer available here.

If you want to display something on a page, you'll need data.
Nowadays we're using SPAs to have a local state in the browser. Since it's local and under your eyes, the state is living in your browser, so you can't really hide it and also, why would you do that?
If you want to hide the data, maybe don't send it initially or send an image at least.
You could also make some obfuscation, but this will just be a band-aid and not really good on semantics/performance/etc...

If you have some sensitive data that you want to show only to admins or so, you could use some auth and rights checking. More details above, in the long answer.