前端使用nuxt框架做ssr,遇到报错客户端与服务端呈现内容不匹配的的解决办法
本文地址: ()
avatar
作者: FeRookie 类型: 原创
更新时间:2022-01-26 阅读:651

使用nuxt开发的时候,在编写组件时,遇到下面这个问题:

这是vue ssr警告:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。 导致这个问题出现的原因,有很多情况,在之前版本使用iview、element等UI框架都会出现这个问题,后面这两框架的新版本好像都处理了这个问题。

在此,我针对我写的代码,来说问题的关键点。

有问题的代码片段:

render() {
    const { count } = this
    return (
      <p>
        <ButtonCount
          style={{ marginTop: '10px' }}
          count={count}
          type="button"
          onClick={this.handleClick}
        >{`hello one ${count}.`}</ButtonCount>
        <ButtonCount
          style={{ marginTop: '10px' }}
          count={count}
          type="button"
          domPropsInnerHTML={`hello two ${count}.`}
          onClick={this.handleClick}
        />
      </p>
    )
  }

没有问题的代码片段:

render() {
    const { count } = this
    return (
      <p>
        <ButtonCount
          style={{ marginTop: '10px' }}
          count={count}
          type="button"
          onClick={this.handleClick}
        >{`hello one ${count}.`}</ButtonCount>
        <ButtonCount
          style={{ marginTop: '10px' }}
          count={count}
          type="button"
          onClick={this.handleClick}
        >{`hello two ${count}.`}</ButtonCount>
      </p>
    )
  }

其实针对这个案列,大家已经看出了不一样的地方,没错就是 domPropsInnerHTML 这个属性,这个属性类似前端javascript 的innerHtml方法。 所以,他肯定是在前端操作dom。 那么,ssr和前端解析的dom结构肯定不一致。 最后,如果是纯前端,可以使用domPropsInnerHTML,但是ssr的话,就不必使用这个了。 个人建议,使用$slots插槽来操作子元素。 em... 其实也可以借助<no-ssr />来处理这块,不用去做服务端处理。 或者在nuxt.config.js plugins的选项设置 ssr: false

感谢阅读!