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

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

네 맞습니다. fallback 옵션을 false로 설정하시게 되면 강의에서 안내드리고 있듯이 getStaticPaths 함수에서 리턴하지 않은 경로에 대해서는 무조건 404 페이지로 리디렉션(보냄)하게 됩니다.

따라서 만약 동적으로 새로운 페이지가 생성되는 상황이라면 fallback 옵션을 true 혹은 blocking으로 설정하셔서 새롭게 추가되는 페이지에도 대응하도록 설정해 주시면 됩니다.

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

질문해주신 상황은 Next.js에서 getStaticProps와 getStaticPaths를 사용할 때 자주 접하는 문제입니다. fallback 옵션의 설정이 그 핵심입니다.

Fallback 옵션 설명

• fallback: false: 지정된 경로 외의 다른 경로로 접근할 경우 404 페이지가 표시됩니다. 이는 getStaticPaths 함수에서 정적으로 생성된 경로들만 사전 렌더링되기 때문입니다.
  
• fallback: true: 경로가 정적으로 생성된 경로가 아니라면 첫 요청 시에는 임시적으로 로딩 페이지를 보여주고, 데이터가 준비되면 최종 페이지를 보여줍니다.
  
• fallback: 'blocking': 새로운 페이지를 생성할 때까지 대기 상태로 있다가 완전한 페이지가 생성되면 렌더링됩니다.
  

질문에 대한 해결 방법

도서 생성 페이지에서 새롭게 생성한 도서 ID를 받아서 상세 페이지로 이동할 때, fallback: false인 경우에는 사전에 빌드 시점에 생성되지 않은 모든 ID에 대해서는 해당 페이지가 존재하지 않기 때문에 404 페이지로 안내될 것입니다.

만약 실시간으로 새로운 도서 페이지를 생성하고 싶다면 fallback: 'blocking' 또는 fallback: true로 설정하는 것을 권장합니다. 이렇게 설정하면 서버가 새로운 요청을 받을 때 새롭게 페이지를 생성하고, 그 이후부터는 정적으로 제공할 수 있게 됩니다.

참고 링크

같은 주제의 확장된 답변으로는 다음의 게시물을 참조하여 더 많은 정보를 얻을 수 있습니다:
- Next.js에서 SSG와 동적 경로 구현시 고려할 점

위의 설명이 도움이 되기를 바랍니다. 설정을 변경하고 테스트하면서 다른 궁금한 점이 있으면 언제든지 다시 물어보세요.

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