为nextjs默认服务器上的静态文件服务设置cache-control头

ws51t4hk  于 2023-03-29  发布在  其他
关注(0)|答案(4)|浏览(223)

我正在使用默认的nextjs服务器通过以下命令运行我的nextjs程序next start
但是,我无法更改公用文件夹下文件的cache-control头。
是否有任何方法可以在不设置自定义服务器的情况下设置缓存控制头?

ttisahbt

ttisahbt1#

有未记录的功能或错误,但它可以工作。更多信息可以在这里找到https://nextjs.org/docs/api-reference/next.config.js/headers
next.config.js文件中添加配置,例如:

async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png)',
        locale: false,
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=9999999999, must-revalidate',
          }
        ],
      },
    ]
  },
yh2wf1be

yh2wf1be2#

根据this bug report and discussion,Next开发人员认为静态文件服务应该只用于开发人员的便利,而不是生产,因此他们不认为添加此类功能是优先事项。
然而,在问题评论中,有人建议使用Express来检测最终将服务于静态文件的请求。例如,如果Next.js路由处理程序是handler()方法,则可以这样做以设置 *.woff字体文件的一年缓存策略:

// this is a hack to make the cache headers friendlier..
  server.get('*.woff2?', (req, res) => {
    res.setHeader('Cache-Control', 'public,max-age=31536000');
    return handler(req, res);
  });
14ifxucb

14ifxucb3#

我使用Express作为Next.js的自定义服务器,下面是我如何为静态文件设置“Cache-Control”头的:

const express = require("express");
const server = express();
...
server.use(express.static(__dirname + "/public", { maxAge: "365d" }));
server.use(function (req, res, next) {
  if (req.url.match(".js|.css|.woff|.jpg|.png|.gif|.ttf")) {
    res.setHeader("Cache-Control", "public,max-age=31536000"); // 365 days
  }
  next();
});
deyfvvtc

deyfvvtc4#

根据NEXT.官方文件,即,
您不能在next.config.js文件中设置Cache-Control头,因为这些头将在生产中被覆盖,以确保API Routes和静态资产被有效缓存。

相关问题