Next.js搭配FontAwesome出现SSR<i>标签不匹配警告该如何解决

问题原因 #

该警告是 hydration 阶段服务端与客户端渲染DOM结构不匹配导致的。你使用的FontAwesome web font方案会在客户端侧自动修改带fa类名的<i>标签的DOM结构，而Next.js服务端返回的HTML仍为原始的<i>标签，两端结构不一致触发警告。

解决方案 #

方案1：使用FontAwesome官方React组件（推荐）

该组件原生支持SSR，不会出现结构不匹配问题，操作步骤如下：

1. 安装依赖

npm install @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons

2. 修改组件代码
   首先在Layout组件头部导入依赖：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons'

替换原来的<i>标签部分代码：

<a href="//www.linkedin.com/in/radoslav-marinov-problem-solver/">
  <FontAwesomeIcon icon={faLinkedinIn} size="2x" style={{color: '#0a66c2', width: '26px'}} />
</a>

可删除原有CSS中针对.fa-linkedin-in的样式规则，也可给组件添加className属性自定义样式。

方案2：客户端侧才渲染图标

如果不想更换现有web font方案，可控制仅在客户端挂载完成后渲染<i>标签，操作步骤如下：

1. 在组件中添加客户端挂载状态

constructor(props) {
  super(props);
  this.state = {
    isClient: false
  }
}
componentDidMount() {
  this.setState({ isClient: true })
  // 原有GA初始化代码保留
}

2. 渲染时增加判断逻辑

<a href="//www.linkedin.com/in/radoslav-marinov-problem-solver/">
  {this.state.isClient && <i className="fab fa-linkedin-in fa-2x"></i>}
</a>

内容的提问来源于stack exchange，提问作者Hairi