javascript - 在 Nuxt.js 中禁用客户端水合或停止在 Nuxt.js 中公开原始数据

Question

我创建了一个使用 Nuxt.js 和服务器端渲染的 Web 应用程序。
我不想暴露我的后端数据，所以我尝试使用 asyncData 和 Axios 向我的后端服务器请求。
但是 Nuxt.js 使用 window.__NUXT__.data 将我的后端数据暴露给客户端多变的。
我尝试使用 render:route 删除它钩，但它说

[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.

因此，我尝试删除导致不匹配错误的脚本，但这会使我的站点上的脚本停止工作。
那么问题来了:如何禁用客户端水合(客户端虚拟 DOM 树渲染)？或如何停止暴露原始数据？
我在这段代码中使用了 asyncData:

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

你不能停止你的 SSR 内容的水合(至少现在还没有，计划很快只提供静态内容)。
Nuxt 旨在将 SSR 添加到您的日常 VueJS SPA。如果您不想要水合，那么您可能在这里使用了错误的框架。
Astro可能更合适，仅举一个例子。您可以找到 more here也。

DOM 不匹配问题是 explained here (原因+解决方案)。

如何在客户端隐藏东西？
简短的回答:你不能。
长答案available here .
如果要在页面上显示某些内容，则需要数据。
现在我们正在使用 SPA 在浏览器中拥有本地状态。由于它是本地的并且在你的眼睛下，状态就存在于你的浏览器中，所以你不能真正隐藏它，而且你为什么要这样做？
如果您想隐藏数据，可能最初不要发送它或至少发送图像。
您也可以进行一些混淆，但这只是一个创可贴，在语义/性能/等方面并不是很好......
如果您有一些只想向管理员显示的敏感数据，您可以使用一些身份验证和权限检查。上面的更多细节，在长答案中。