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

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

동적 경로를 갖는 page.tsx 파일 안에 generateStaticParams 라는 함수를 설정하게되면, 경로에 해당하는 모든 페이지는 모두 Static Page로 설정됩니다. 그리고 이는 generateStaticParams에서 return하지 않은 URL Parameter를 갖는 페이지에 대해서도 동일합니다.

이때 "fetch 옵션에 "force-cache"를 설정하지 않았음에도 어떻게 이럴 수 있느냐"고 질문 주셨는데요 Next.js에서는 동적 경로를 갖는 페이지에 한해 예외적으로! generateStaticParams 함수가 존재한다면, 무조건 Static 페이지로 설정하게 됩니다.

이 부분에 대해 "예외적으로 그렇다" 라는 이야기를 강의에 추가해 두었다면 좋았을텐데 스스로에게 조금 아쉽네요 ㅠㅠ 시간이 될 때 추가해 두겠습니다!

넵 친절한 답변 감사합니다~!!

안녕하세요, 인프런 AI 인턴입니다. 오윤석님.

Next.js의 동적 경로와 풀라우트 캐시에 대해 질문해 주셨군요. 질문하신 내용은 많은 분들이 혼란스러워할 수 있는 주제인데요, 이에 대해 설명드리겠습니다.

Dynamic Routes와 Full Route Cache

1. Dynamic Routes: Next.js에서 동적 경로([id]와 같은)를 처리할 때 generateStaticParams를 사용해서 정적 페이지를 미리 생성할 수 있습니다. 이 경우, 지정되지 않은 id로 요청하면 서버가 요청을 받아 새로운 페이지를 즉석에서 생성합니다. 이 과정이 동적 페이지 생성입니다.

2. Full Route Cache 동작:

   • Next.js에서는 정적 페이지와 ISR(Incremental Static Regeneration) 기능을 활용하여 페이지의 성능을 최적화합니다. 여기서 정적 페이지는 빌드 시 사전 생성되며, ISR을 통해 정적 페이지가 일정 주기로 업데이트되기도 합니다.
     
   • force-cache를 설정하지 않은 경우에도, Next.js는 ISR과 결합하여 동적 경로에 대해 기존의 정적 페이지처럼 동작할 수 있습니다. 즉, 최초의 동적 생성 이후, 지정된 재생성 시간 간격으로 캐시가 갱신되며 이를 통해 효율적인 페이지 로드가 가능합니다.
     

3. 캐싱 옵션 및 설정:

   • fetch 메서드에 force-cache 옵션이 없이도 기본적인 캐싱 메커니즘과 ISR 기능에 의해 페이지가 일정 시간 간격으로 풀라우트 캐시에 저장되고 제공될 수 있습니다.
     

이와 같은 기능은 Next.js의 성능 향상 메커니즘 중 하나로, 서버 부하를 줄이고 사용자에게 빠른 경험을 제공하기 위한 것입니다.

관련 질문 참고:

• 정적 사이트 생성 (SSG)에서 빌드 타임에 데이터를 요청한다면 사용자는 최신 데이터가 아닌 데이터를 받게 되는 것 아닌가요?: ISR 방식을 통해 SSG의 단점을 보완하는 방법에 대해 설명하고 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.