static 페이지vs 다이나믹 페이지

한 입 크기로 잘라먹는 Next.js(v15)

5.2) 풀 라우트 캐시 2

해결된 질문

작성

233

수정됨

폴라우트 페이지 2를 보면서 / 인덱스페이지가 강사님은 static 페이지가 아닌 다이나믹 페이지로 빌드가 되는 부분에서 강사님은 fetch에 force-cache를 적용시키면서 이제 다이나믹된 페이지를 static 페이지로 바꾸셨느데

일단 저는 force-cache 옵션을 적용을 안해도 static 페이지이더라구요

강사님과 저랑 다른 점은 api호출하는 함수 부분을 따로 api 폴더에 빼둔거 말고는 다른 점은 없습니다 .

이렇게 따로 빼놓은 뒤 그냥 promis.all로 데이터 패칭을 해서 그대로 화면에 보여줬습니다 (이것저것 시험하느라 Allbook ,RandomBook 컴포넌트를 따로 빼지는 않은 상태입니다. )

export default async function Home() {
  const [allBooks, randomBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBook(),
  ]);

저는 force-cache 를 적용안햇는데도 왜 다이나믹 페이지가 안되고 static 페이지가 되는걸까요 ...

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

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

해당 부분은 Next.js의 버전 업데이트로 인해 지금 막 변경되고 있는 사항인 것 같아요

원래라면 강의에서 안내드린대로 데이터 캐시 옵션이 없는 fetch를 사용할 경우 해당 페이지가 다이나믹 페이지로 동작해야 하지만, 현재 명시적으로 "no-store" 옵션을 적용한 fetch를 사용하는 경우에만 다이나믹 페이지로 설정되고 있는 것으로 보입니다.

그러나 공식문서에서는 강의에서 설명드린대로 옵션이 없는 fetch의 경우 캐시되지 않고, 그렇게 캐시되지 않는 fetch를 사용하는 경우 Dynamic Page로 설정된다고 설명되어 있어 살짝 혼란스러운 상황입니다.

구체적으로 살펴보면 먼저 아래 그림처럼 경로상의 캐싱되지 않는 fetch가 있을 경우 Static 페이지로 설정되지 않는다고 아래와 같이 작성되어 있습니다.

위 그림의 출처 : https://nextjs.org/docs/app/building-your-application/caching#static-and-dynamic-rendering

이어서 아래 그림처럼 아무런 데이터 캐시 옵션도 설정되지 않은 fetch 메서드는 분명 "no-store"와 동일하게 동작한다고도 되어 있습니다.

출처 : https://nextjs.org/docs/app/building-your-application/caching#data-cache

따라서 강의에서 안내드린대로 옵션이 생략된 fetch 메서드를 사용하는 페이지는 곧 캐시되지 않는 fetch를 사용하는 페이지이므로 Dynamic으로 설정되어야 하지만 (그리고 이전 버전까지는 분명 그렇게 설정 되었지만) 무슨 이유에서인지 현재 버전에서는 명시적으로 fetch에 "no-store"옵션을 설정해주지 않으면 Static Page로 설정되고 있습니다.

이에 개인적으로는 모든 fetch 메서드에 명시적으로 캐시 옵션을 설정하셔서 혼란을 방지하시는 걸 권장드리고 싶습니다.

aso

질문자

이렇게 빠르게 상세한 답변 감사합니다!

말씀주신대로 no-store를 직접으로 옵션에 넣으니 다이나믹 페이지로 잘 바뀌더라구요

한가지 궁금한점이 있는데요 혹시 저 fetch 함수가 get으로 요청되어 기본 캐싱 적용이 되는 부분이 현재 인덱스 페이지가 force-cache를 안해도 static 페이지가 되는 이슈랑 연관되어 있는건 아니죠 ?

그리고 저 밑에 ai 인턴글에 있는 Next.js의 Data Caching 기본 설정: 서버 컴포넌트에서 데이터를 가져올 때 기본적으로 정적 페이지로 캐시하게 설계되어 있을 수 있습니다. 이러한 경우, 데이터 캐싱이 자동으로 적용되어 force-cache 옵션을 명시하지 않더라도 효과를 볼 수 있습니다. 이부분도 제가 정확한 정보다라고 인지해도 되는 정보일려나요 ..?

이정환 Winterlood

지식공유자

두 질문 순서대로 답변드리겠습니다.

첫번째 질문

우선 아무런 캐시 옵션을 적용하지 않은 fetch 메서드는 강의에서 설명드린 내용과 동일하게 캐싱되지 않습니다. 따라서 기본 캐싱은 적용되지 않습니다. 그러나 명시적으로 "no-store" 옵션을 적용하지 않을 경우 페이지가 풀 라우트 캐시에 캐싱되는 이슈가 현재 있는 상황이라고 이해하시면 될 것 같습니다.

두번째 질문

AI 인턴의 답변은 Next.js 15 버전보다는 14 버전을 기준으로 이루어진 것 같습니다. 강의에서 안내드린대로 서버 컴포넌트에서 사용된 fetch는 기본적으로 캐시되지 않도록 동작합니다.

인프런 AI 인턴

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

Next.js에서 페이지가 정적(Static)인지 동적(Dynamic)인지 구분하는 것은 페이지 내 데이터 요청 방법과 관련이 있습니다. 질문하신 내용에서 핵심은 API 호출 시 force-cache 옵션을 사용하지 않았음에도 불구하고 페이지가 정적 페이지로 간주되는 이유일 것입니다.

페이지가 static으로 빌드되는 이유는 여러 가지 요인이 있을 수 있습니다.

Static Page로 빌드되는 가능한 이유:

데이터 요청 시점: 페이지 내에서 fetchBooks()와 fetchRandomBook() 함수가 클라이언트 측이 아닌 서버 측에서 호출되며, 이러한 데이터 요청이 빌드 타임에 발생한다면 페이지는 정적 페이지로 생성될 수 있습니다.
Next.js의 Data Caching 기본 설정: 서버 컴포넌트에서 데이터를 가져올 때 기본적으로 정적 페이지로 캐시하게 설계되어 있을 수 있습니다. 이러한 경우, 데이터 캐싱이 자동으로 적용되어 force-cache 옵션을 명시하지 않더라도 효과를 볼 수 있습니다.
Application의 구조: API 호출 함수가 별도의 파일로 분리되어 있더라도, 이를 호출하는 부분이 서버에서 실행되는 컴포넌트 내에 위치한다면 페이지는 초기 빌드 시 정적으로 렌더링되어 서버 페이지로 인식될 수 있습니다.

이는 Next.js의 데이터 패칭에 대한 깊이 있는 이해가 필요하며, 관련 내용은 다음과 같은 기존 질문 및 답변을 참조하시면 도움이 될 수 있습니다:

Next.js에서 static vs dynamic 페이지 구분하기: Next.js의 정적/동적 페이징 이해에 관한 설명이 포함되어 있습니다.

만약 이러한 상황이 예상치 못한 것이라면, 코드를 점검하여 데이터 요청이 클라이언트 측에서 발생하지 않도록 설정되어 있는지 확인하는 것이 필요합니다.

저는 질문자님의 이해를 돕고자 유사한 사례에 대한 답변 링크를 참고하여 지원해 드렸습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

static 페이지vs 다이나믹 페이지

Static Page로 빌드되는 가능한 이유: