面试题：Next.js 中如何配置静态文件缓存策略以优化页面加载速度

Question

请阐述在 Next.js 项目里，通过何种方式来设置静态文件（如 CSS、JavaScript、图片等）的缓存策略，使其在用户再次访问页面时能更快加载。可以举例说明一些常用的配置参数及其作用。

Answer 1

在Next.js项目中，可以通过以下方式设置静态文件的缓存策略：

1. 使用Next.js内置的优化

Next.js默认会对静态文件进行优化，包括自动拆分CSS和JavaScript文件，并使用合适的缓存策略。它会根据文件内容生成哈希值作为文件名的一部分，例如styles.[hash].css。这种方式使得浏览器可以根据文件名的变化来判断文件内容是否改变，从而决定是否从缓存中加载。

2. 配置next.config.js文件

通过在next.config.js中配置assetPrefix，可以为静态文件设置前缀。这在部署到CDN等场景时很有用，CDN通常会对静态文件进行高效缓存。例如：

module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://your-cdn-url.com' : ''
}

这样，生产环境下，静态文件会从CDN加载，利用CDN的缓存机制提高加载速度。

3. 设置HTTP缓存头

• Cache - Control：
  • public：表明响应可以被任何中间缓存（如浏览器、CDN等）缓存。例如对于一些不经常变化的图片，可以设置Cache - Control: public, max - age = 31536000（一年的秒数），这意味着浏览器或CDN可以缓存该图片一年，期间再次访问相同图片时直接从缓存加载。
  • private：表示响应只能被最终用户的浏览器缓存，CDN等中间缓存不能缓存。常用于包含用户特定信息的资源。
  • max - age：指定资源在缓存中保持有效的最大时间（以秒为单位）。例如Cache - Control: max - age = 60表示资源在60秒内有效，之后需要重新验证。
  • no - cache：并不是说不缓存，而是每次使用缓存资源前，需要向服务器验证资源是否更新。
  • no - store：完全禁止缓存，每次都从服务器获取资源。
• ETag：是资源的唯一标识符，由服务器生成。浏览器请求资源时，会将之前缓存的ETag值发送给服务器，服务器通过对比ETag判断资源是否改变。如果未改变，服务器返回304状态码，浏览器直接从缓存加载；如果改变，服务器返回新的资源及新的ETag。

在Next.js项目中，如果使用自定义服务器（如基于express），可以在服务器端设置这些HTTP缓存头：

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV!== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/static/*', (req, res) => {
    res.setHeader('Cache - Control', 'public, max - age = 31536000');
    // 其他缓存头设置
    handle(req, res);
  });

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  const port = process.env.PORT || 3000;
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

通过上述方式，可以有效地设置Next.js项目中静态文件的缓存策略，提高页面加载速度。