React Font Awesome在SSR与Hydrate渲染时先显大图标后缩小问题咨询

我之前也碰到过一模一样的情况！这种图标突然跳变的现象其实是**FOUC（Flash of Unstyled Content）**的一种，在SSR场景下很容易出现，核心问题就是Font Awesome的样式没有和服务端渲染的DOM同步到位，导致客户端首次显示时没有尺寸约束，等样式加载完成后才恢复正常。下面是我亲测有效的解决思路：

一、先明确问题根源 #

• 服务端未注入Font Awesome核心CSS：如果SSR输出的HTML里没有包含Font Awesome的基础样式，客户端会先渲染出没有样式的原始图标（默认是超大尺寸），直到客户端异步加载完CSS才会纠正尺寸。
• 尺寸类的加载时机滞后：如果你的尺寸类（比如fa-lg、fa-2x）是通过客户端动态添加的，或者依赖于客户端的状态/组件渲染，那么服务端渲染的DOM里没有这些类，Hydrate时才补上，就会出现尺寸跳变。
• Font Awesome组件的SSR适配问题：如果你用的是官方的@fortawesome/react-fontawesome组件，默认配置可能没有做好SSR兼容，导致服务端渲染的图标DOM缺少必要的样式类或内联样式。

二、具体解决方案 #

1. 确保Font Awesome CSS在服务端全局注入 #

不管你用的是本地CSS还是CDN，一定要让服务端渲染的HTML <head> 里包含Font Awesome的核心样式，这样客户端打开页面时就能立刻加载到样式，不会出现无样式的图标。

• 如果你用CDN：直接在服务端模板的<head>里加上CDN链接，比如：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• 如果你用本地CSS：在SSR的入口文件里导入Font Awesome的CSS，然后通过react-helmet这类工具把样式注入到服务端输出的HTML中。比如：

  // 服务端渲染入口
  import { Helmet } from 'react-helmet';
  import 'font-awesome/css/font-awesome.min.css';
  
  const App = () => (
    <>
      <Helmet>
        <link rel="stylesheet" href="/path/to/font-awesome.min.css" />
      </Helmet>
      {/* 你的应用组件 */}
    </>
  );
  

2. 确保尺寸类在服务端渲染时就存在 #

不要在客户端组件里动态添加尺寸类（比如依赖useEffect或者客户端状态），要让服务端渲染的DOM里直接包含fa-lg、fa-2x这类尺寸类。比如：

// 正确写法：服务端渲染时就能生成带尺寸类的DOM
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';

const UserIcon = () => (
  <FontAwesomeIcon icon={faUser} className="fa-lg" />
);

避免这种写法：

// 错误写法：尺寸类在客户端Hydrate后才添加
const UserIcon = () => {
  const [sizeClass, setSizeClass] = useState('');
  
  useEffect(() => {
    setSizeClass('fa-lg');
  }, []);
  
  return <FontAwesomeIcon icon={faUser} className={sizeClass} />;
};

3. 配置@fortawesome/react-fontawesome的SSR兼容 #

如果你用的是官方React组件，需要确保配置了SSR支持，让服务端能正确渲染出图标的样式。可以在服务端入口文件里提前预加载图标，并且设置ssr: true：

// 服务端入口
import { config } from '@fortawesome/fontawesome-svg-core';
import { faUser, faHome } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

// 预加载需要的图标到库中
library.add(faUser, faHome);

// 开启SSR模式，避免客户端重复添加CSS
config.autoAddCss = false;

然后在服务端渲染时，把Font Awesome的CSS注入到HTML中：

import { getCssText } from '@fortawesome/fontawesome-svg-core';

// 服务端渲染函数
const renderAppToString = () => {
  const appHtml = ReactDOMServer.renderToString(<App />);
  const cssText = getCssText();
  
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <style>${cssText}</style>
      </head>
      <body>
        <div id="root">${appHtml}</div>
      </body>
    </html>
  `;
};

4. 添加内联样式作为兜底 #

如果以上方法还不能完全解决，可以给图标添加内联样式，强制设置初始尺寸，避免跳变：

<FontAwesomeIcon 
  icon={faUser} 
  className="fa-lg" 
  style={{ fontSize: '1.333em', lineHeight: '0.75em' }} // 和fa-lg的默认样式一致
/>

三、验证方法 #

可以打开浏览器的“禁用缓存”选项，然后刷新页面，查看Network面板：

• 检查Font Awesome的CSS是否在HTML加载时就开始请求，并且在DOM渲染完成前加载完成。
• 查看服务端输出的HTML源码，确认图标DOM上已经有尺寸类，并且<head>里包含了Font Awesome的CSS。

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