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

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

Next.js에서 페이지가 정적(Static)인지 동적(Dynamic)인지 구분하는 것은 해당 페이지가 데이터를 얻는 방법과 연관이 있습니다. 질문하신 부분에서 인덱스 페이지가 빌드 환경에서 dynamic으로 표시되는 이유는 몇 가지 요인에 의해 발생할 수 있습니다.

1. getStaticProps & getStaticPaths: 만약 페이지에 getStaticProps와 getStaticPaths가 모두 포함되어 있다면, 해당 페이지는 빌드 타임에 정적으로 생성되어야 합니다. 이러한 옵션이 활성화되어 있는지 확인해 보시고, 설정이 맞는지 확인하는 것이 좋습니다.

2. Automatic Static Optimization: Next.js는 기본적으로 데이터를 사전에 준비할 수 있는 SSR(Server-Side Rendering), SSG(Static Site Generation)와 같은 방식이 혼합되어 있습니다. 만약 페이지에 데이터를 사전에 준비하는 코드가 없다면 자동으로 정적 페이지로 최적화됩니다. 따라서 코드 수정을 통해 데이터 관련 코드가 추가되었다면, 해당 페이지는 동적 페이지로 처리될 수 있습니다.

3. Next.js의 Config 설정 확인: 특정 페이지나 컴포넌트에서 자동으로 프리페칭 및 정적 최적화가 비활성화 될 수 있는 환경이 존재할 수 있으므로, 프로젝트의 next.config.js 설정을 확인하여 프리페칭, SSR 관련 설정이 적절한지 확인해 보세요.

이와 관련된 기존 질문 중, Next.js에서 static vs dynamic 페이지 구분하기을 참고하시면 도움이 될 수 있습니다. 여기서 어떻게 페이지가 정적/동적으로 인식 되는지에 대한 설명이 있습니다.

인덱스 페이지가 정말 정적 페이지로 동작하는지 확인하려면:
- 빌드된 HTML이 디스크에 생성되는지 확인
- 해당 페이지가 빌드 시점에서 fetch 등의 네트워크 요청이 없는지

설명을 통해 바라보셨던 로직이 변경될 수 있는 요소들을 체크하셔서 인덱스 페이지가 정적 페이지로 올바르게 동작하는지 확인해보시기 바랍니다.

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