5.5 클라이언트 라우터 캐시 관련 질문입니다

안녕하세요 이정환입니다.

해당 기능은 클라이언트 라우터 캐시를 사용하지 않는 방법 보다는 다음 방법으로 해결하는게 더 깔끔하지 않을까 싶어요!

먼저 다음과 같은 Timer 컴포넌트를 만듭니다.

"use client";

import { useEffect, useState } from "react";

export default function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <div>{time.toLocaleString()}</div>;
}

그리고 이 컴포넌트를 레이아웃 컴포넌트의 자식 컴포넌트로 배치합니다.

이렇게 되면 클라이언트 라우터 캐시의 유무를 떠나서 클라이언트 측에서 자체적으로 타이머를 통해 시간을 계속해 업데이트하기 때문에 원하시는 목적을 달성하실 수 있을 것으로 보입니다.

추가로 클라이언트 라우터 캐시를 해제하시려면 next.config.mjs 파일에서 다음과 같이 라우터 캐시의 StaleTime(상하는 시간, 유통기한)을 0초로 설정해주시면 됩니다. (다이나믹, 스태틱 페이지 모두 0초로 설정)

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

다만 이렇게 설정할 경우 모든 라우터 캐시가 해제되는 결과를 초래하므로 조심해서 사용하셔야 한다는 점 까지 말씀드릴 수 있겠습니다.

추가로 관련 공식문서도 첨부해드립니다.

https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes

인프런 커뮤니티 질문&답변