Wednesday, 22 December 2021

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

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' }));
}


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

No comments:

Post a Comment