💶 Next.js Cache 적용

next.js를 사용하는데 자원 크기 때문에 불필요한 네트워킹 자원 소모가 크더라구요.
최적화를 위해서 기본 설정을 수정해야합니다.

설정

// next.config.js
...
images: {
  	// 리모트 이미지의 경우
  	domains: ['your-cdn-image-domain'],
  	// 하루동안 캐시 저장
    minimumCacheTTL: 86400,
}
...

https://nextjs.org/docs/pages/api-reference/components/image#minimumcachettl

minimumCacheTTL의 설정값으로 하거나, 헤더의 Cache-control 중 더 큰 값으로 설정합니다.
그런데 헤더에 cache를 설정한 기억이 없습니다.

역시나 설정하지 않았네요. 🙄

방금 수정한 next.config.js 에 추가합니다.

// next.config.js
...
headers: async () => {
    return [
      {
        headers: [
          {
            key: 'Cache-Control',
            value: 'private, no-cache, no-store, max-age=0, must-revalidate',
          },
        ],

        source: '/:path*',
      },
      {
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=86400, immutable',
          },
        ],

        source: '/:path(.+\\.(?:ico|png|svg|jpg|jpeg|gif|webp|json|mp3|mp4|ttf|ttc|otf|woff|woff2)$)',
      },
      {
        headers: [
          {
            key: 'Cache-Control',
            value: 'private, no-cache, no-store, max-age=0, must-revalidate',
          },
        ],

        source: '/_next/data/:path*',
      },
      {
        headers: [
          {
            key: 'Cache-Control',
            value: 'private, no-cache, no-store, max-age=0, must-revalidate',
          },
        ],

        source: '/_next/:path(.+\\.(?:json)$)',
      },
    ];
  },
...

캐싱

이제 이미지를 포함한 폰트나 모든 데이터들이 캐시 처리된것을 확인할 수 있었습니다.

업데이트 후 캐시와 중복되면 어떻게 될까..?
-> 기본적으로 next에서는 my_image.cd0657b0.png 와 같이 Content Hash 가 적용되어 배포 때 마다 다른 이름을 가지기 때문에 캐싱처리가 되지 않을것이며, 클라이언트는 항상 최신 버전의 소스를 사용할 수 있습니다.