如何让NextJS在初始渲染时预加载复选框的SVG背景图？

问题 #

我有一个线上站点，点击复选框时，它应变为绿色并显示对勾SVG，但首次加载应用后点击复选框，背景变绿与SVG显示之间存在明显延迟——NextJS仅在点击时才请求该SVG。该SVG通过Tailwind CSS配置为::before伪元素的背景图，仅在复选框处于checked状态时通过条件类名添加。请问如何让NextJS在初始渲染时就请求该SVG，以消除此延迟？

组件代码 #

const Checkbox = (props: Props) => {
  const [checked, setChecked] = useState(false);

  const handleClick = () => {
    setChecked((prevChecked) => !prevChecked);
  };
  return (
    <>
      <input
        type="checkbox"
        onClick={handleClick}
        className={cn({
          "before:bg-tick": checked,
        })}
      ></input>
    </>
  );
};

Tailwind配置 #

module.exports = {
   extend: {
      backgroundImage: {
        tick: "url(/Tick.svg)",
      },
   }
}

解决方案 #

方法1：预加载SVG资源 #

在应用根组件（如_app.tsx/_app.js）中通过创建Image实例预加载SVG，浏览器会在初始渲染阶段请求该资源：

// _app.tsx
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const preloadImg = new Image();
    preloadImg.src = '/Tick.svg';
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

方法2：强制Tailwind包含目标样式类 #

Tailwind采用按需生成CSS的机制，只有代码中直接引用的类才会被打包。可以通过两种方式强制before:bg-tick类被包含，让浏览器提前加载SVG：

方式A：全局CSS声明

在全局CSS文件（如globals.css）中添加：

@layer utilities {
  .before\:bg-tick::before {
    background-image: url('/Tick.svg');
  }
}

方式B：组件内添加隐藏引用元素

在Checkbox组件中添加一个隐藏元素，显式引用before:bg-tick类：

const Checkbox = (props: Props) => {
  const [checked, setChecked] = useState(false);

  const handleClick = () => {
    setChecked((prevChecked) => !prevChecked);
  };
  return (
    <>
      {/* 隐藏元素触发SVG预加载 */}
      <div className="before:bg-tick hidden"></div>
      <input
        type="checkbox"
        onClick={handleClick}
        className={cn({
          "before:bg-tick": checked,
        })}
      ></input>
    </>
  );
};

方法3：将SVG内联为Base64 #

把SVG文件转为Base64编码，直接嵌入Tailwind配置中，彻底消除网络请求：

module.exports = {
   extend: {
      backgroundImage: {
        // 替换为你的SVG对应的Base64编码
        tick: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjMgMTYuN0M5LjcgMTcuMyA4LjcgMTcuMyA4LjEgMTYuN0M3LjUgMTYuMSA3LjUgMTUgOC4xIDE0LjRMMTIuMiAxOC41QzEyLjggMTkuMSAxMy44IDE5LjEgMTQuNCAxOC41TDE5LjkgMTNMMjAuNSAxMy42QzIxLjEgMTQuMiAyMS4xIDE1LjIgMjAuNSAxNS44QzE5LjkgMTYuNCAxOC45IDE2LjQgMTguMyAxNS44TDEzLjEgMTAuNkMxMi41IDEwIDEwLjkgMTAgMTAuMyAxMC42QzkuNyAxMS4yIDkuNyAxMi4yIDEwLjMgMTIuOEwxMi45IDE1LjNMMTguMyA5LjlMMTguOSAxMC41QzE5LjUgMTEuMSAxOS41IDEyLjEgMTguOSAxMi43QzE4LjMgMTMuMyAxNy4zIDEzLjMgMTYuNyAxMi43TDEyLjEgMTcuM0wxMC4zIDE2LjdaIi8+Cjwvc3ZnPgo=')",
      },
   }
}

可使用在线工具将SVG文件转换为Base64编码，适合体积较小的图标资源。

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