staleTimes

staleTimes는 클라이언트 측 라우터 캐시에서 페이지 세그먼트의 캐싱을 가능하게 하는 실험적 기능입니다.

실험적 staleTimes 플래그를 설정하여 이 실험적 기능을 활성화하고 사용자 지정 재검증 시간을 제공할 수 있습니다:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

static과 dynamic 속성은 서로 다른 유형의 링크 프리페칭을 기반으로 한 시간 주기(초 단위)에 해당합니다.

• dynamic 속성은 페이지가 정적으로 생성되지 않았거나 완전히 프리페치되지 않은 경우(즉, prefetch=로 설정되지 않은 경우)에 사용됩니다.
  • 기본값: 0초 (캐시되지 않음)
• static 속성은 정적으로 생성된 페이지나 Link의 prefetch 속성이 true로 설정된 경우, 또는 router.prefetch를 호출할 때 사용됩니다.
  • 기본값: 5분

알아두면 좋은 점:

• 로딩 경계는 이 구성에서 정의된 static 기간 동안 재사용 가능한 것으로 간주됩니다.
• 이는 부분 렌더링에 영향을 미치지 않습니다. 즉, 공유 레이아웃은 모든 탐색에서 자동으로 다시 가져오지 않고, 변경되는 페이지 세그먼트만 다시 가져옵니다.
• 이는 레이아웃 시프트를 방지하고 브라우저 스크롤 위치를 잃지 않기 위해 뒤로/앞으로 캐싱 동작을 변경하지 않습니다.

클라이언트 라우터 캐시에 대해 여기에서 더 자세히 알아볼 수 있습니다.

버전 기록