面试题：Next.js自定义静态文件服务中如何处理缓存控制

Question

在Next.js自定义静态文件服务配置时，为了优化性能，需要对静态文件进行合理的缓存控制。请阐述如何设置不同类型静态文件（如CSS、JS、图片）的缓存策略，并且说明在Next.js应用部署到不同环境（如开发环境、生产环境）时，缓存配置应如何调整，给出具体的代码示例。

Answer 1

设置不同类型静态文件的缓存策略

1. CSS 和 JS 文件：

   • 对于 CSS 和 JS 文件，它们通常变化频率较低。可以设置较长的缓存时间，比如一年（31536000 秒）。这可以通过设置 Cache - Control 头来实现。
   • 在 Next.js 中，可以使用 next.config.js 文件来配置。

   module.exports = {
     async headers() {
       return [
         {
           source: '/_next/static/(css|js)/:path*',
           headers: [
             {
               key: 'Cache - Control',
               value: 'public, max - age=31536000, immutable'
             }
           ]
         }
       ];
     }
   };
   

   • 这里 source 匹配 /_next/static/ 下的 css 或 js 目录及其子路径下的所有文件。public 表示响应可以被任何中间缓存存储，max - age 设置缓存有效期为一年，immutable 表示如果资源缓存过期，浏览器不应重新验证资源，直接使用缓存副本。

2. 图片文件：

   • 图片的变化频率也相对较低，但可能会因为业务需求更新得比 CSS 和 JS 稍频繁一些。可以设置几个月的缓存时间，例如 604800 秒（一周）。

   module.exports = {
     async headers() {
       return [
         {
           source: '/_next/static/media/:path*',
           headers: [
             {
               key: 'Cache - Control',
               value: 'public, max - age=604800'
             }
           ]
         }
       ];
     }
   };
   

   • 这里 source 匹配 /_next/static/media/ 下的所有文件。public 允许缓存，max - age 设置缓存有效期为一周。

不同环境下缓存配置的调整

1. 开发环境：

   • 在开发环境中，为了能够及时看到代码和文件的修改，应尽量避免缓存。可以设置较短的缓存时间，比如 0 秒。

   module.exports = {
     async headers() {
       return [
         {
           source: '/_next/static/(css|js|media)/:path*',
           headers: [
             {
               key: 'Cache - Control',
               value: 'no - cache, no - store, must - revalidate'
             }
           ]
         }
       ];
     }
   };
   

   • no - cache 表示客户端在使用缓存副本之前，必须先与服务器确认资源的有效性；no - store 表示不允许缓存存储该响应；must - revalidate 表示如果缓存过期，必须向服务器重新验证资源。

2. 生产环境：

   • 生产环境使用上述设置较长缓存时间的配置，以提高性能和减少服务器负载。如前面对于 CSS、JS 和图片文件设置的较长缓存时间的配置。例如对于 CSS 和 JS 文件：

   module.exports = {
     async headers() {
       return [
         {
           source: '/_next/static/(css|js)/:path*',
           headers: [
             {
               key: 'Cache - Control',
               value: 'public, max - age=31536000, immutable'
             }
           ]
         }
       ];
     }
   };
   

   • 对于图片：

   module.exports = {
     async headers() {
       return [
         {
           source: '/_next/static/media/:path*',
           headers: [
             {
               key: 'Cache - Control',
               value: 'public, max - age=604800'
             }
           ]
         }
       ];
     }
   };
   

通过以上配置，可以根据不同类型的静态文件和不同的环境，合理设置缓存策略，优化 Next.js 应用的性能。