serverComponentsHmrCache

실험적인 serverComponentsHmrCache 옵션을 사용하면 로컬 개발 환경에서 Hot Module Replacement (HMR) 새로고침 간에 서버 컴포넌트의 fetch 응답을 캐시할 수 있습니다. 이는 더 빠른 응답과 과금되는 API 호출 비용 감소로 이어집니다.

기본적으로 HMR 캐시는 cache: 'no-store' 옵션이 있는 요청을 포함한 모든 fetch 요청에 적용됩니다. 이는 캐시되지 않은 요청이 HMR 새로고침 간에 새로운 데이터를 표시하지 않음을 의미합니다. 그러나 캐시는 탐색이나 전체 페이지 새로고침 시 지워집니다.

next.config.js 파일에서 serverComponentsHmrCache를 false로 설정하여 HMR 캐시를 비활성화할 수 있습니다:

next.config.ts

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // 기본값은 true입니다
  },
};
 
export default nextConfig;

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // 기본값은 true입니다
  },
};
 
module.exports = nextConfig;

알아두면 좋은 점: 개발 중 콘솔에서 fetch 캐시 적용고 누락을 로깅하여 더 잘 모니터링할 수 있도록 logging.fetches 옵션을 사용하는 것을 권장합니다.

serverActions serverExternalPackages