将 React 与 SSR 一起使用时，什么会导致字体和图像被下载两次？

Question

我正在使用 create-react-app 并使用 Express 服务器配置了 SSR。

当我禁用 JavaScript 时，一切正常（下载并显示资产）。

当我启用 JavaScript 时，网站按预期从服务器加载，但随后 hydrate 触发资产再次下载（不知何故，这些资产未被 Firefox 缓存）。

这是 /static/media/fonts/open-sans-latin-400.woff2 的 headers（除了 Accept-Encoding: gzip, deflate 和 Accept-Encoding: identity 之外，这两个请求似乎完全相同）。

什么会导致这种行为？

Answer 1

发现问题...

我使用 Express 来提供静态资产。

通过 default, express.static 设置为不缓存资产 (Cache-Control: public, max-age=0)。

以下解决了导致字体和图像被下载两次的缓存问题。

$ cat .env
EXPRESS_MAX_AGE=60000

const expressStaticOptions = {
  maxAge: process.env.EXPRESS_MAX_AGE ?? 0,
}
app.use(express.static(join(__dirname, "build"), expressStaticOptions))

我没有默认设置 60000 的原因是在生产中使用 Nginx 处理缓存配置。