我正在创建一个使用Nuxt.js进行服务器端渲染的Web App。
我不想将我的后端数据暴露出去,因此我尝试使用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.
所以我尝试删除导致不匹配错误的脚本,但是这会使我的站点停止工作。
那么问题来了:如何禁用客户端水合(client-side virtual DOM tree rendering)?或者如何停止暴露原始数据?
我在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' }));
}