인프런 커뮤니티 질문&답변
작성한 질문수
index page에서 이미 모든 SSG 경로 생성
작성
·
36
·
수정됨
0
강의 파트 : 2.16)SSG 4.폴백옵션 설정하기.
질문 : SSG경로 생성은 /books/[id] 페이지 요청이 발생했을 경우 생성되어야 하는걸로 이해했지만, index page만 접속해도 index page에 노출되는 id 값을 가진 데이터들이 전부 /books/[id] 에 해당하는 SSG 파일이 생성되었습니다.
(지금 추천하는 도서, 등록된 모든 도서)
(위의 사진은 빌드 후, 인덱스 페이지 요청 시 생성된 SSG파일들 입니다.)
(인덱스에서 스크롤 해보니 생성되는것을 확인했습니다.)
이 상황은 next의 LInk컴포넌트 frefetch와 연관있는 경우일까요?
답변 2
0
안녕하세요 이정환입니다.
아 넵 정확히 맞습니다. 프리페칭때문에 이런 현상이 발생하게 됩니다 😃
프리페칭 기능 역시 HTTP Request로 Next.js 서버에게 특정 페이지를 요청하는 동작입니다. 따라서 프리페칭 기능이 동작하게 되면 빌드 타임에 생성해 두지 않았던 SSG 페이지들도 일제히 생성됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이윤재님.
Next.js에서 사전 렌더링과 프리패칭 기능은 페이지 로딩 속도를 높이고 사용자 경험을 향상시키기 위해 기본적으로 제공됩니다. 질문하신 상황은 Next.js의 Link 컴포넌트의 prefetch 기능과 관련이 있습니다.
프리패칭 (Prefetching)
Next.js의 Link 컴포넌트를 활용할 때, 기본적으로 해당링크의 목적지 페이지를 미리 로드하는 프리패칭 기능이 활성화됩니다. 이는 사용자가 그 링크를 클릭하기 전에, 페이지의 JS Bundle과 데이터(JSON)를 미리 가져옴으로써 빠른 네비게이션이 가능하게 하는 것입니다.
현재 상황에 대한 설명
Index 페이지에서 SSG 파일 생성:
index페이지에 특정 도서들의 ID 목록이 나열되고, 이 목록에 대한Link컴포넌트가 설정된 상황이라면, Next.js는 이 링크들에 대한 페이지를 미리 로드하기 위해prefetch를 실행합니다.SSG 파일 생성 과정:
prefetch된 페이지는getStaticProps에 캐시 설정이 되어 있다면, 그것들은 빌드 타임에 미리 렌더링됩니다. 그리고 이 과정에서 SSG에 필요한 데이터를 미리 가져와 해당 경로에 해당하는 HTML과 JSON 파일들이 생성됩니다.
해결 방안 및 참고사항
만약 사전 프리패칭이 원치 않는 동작이라면,
Link컴포넌트의prefetch속성을false로 설정하여 프리패칭 기능을 비활성화할 수 있습니다.관련된 문제 및 해결책에 대해 더 알아보고 싶으시다면, 이전에 답변드린 SSG 폴백 옵션 게시물을 참고하시면 더 깊이 있는 정보를 얻으실 수 있을 것입니다.
위 내용을 바탕으로 설정을 조정하시면서 테스트를 해보세요. 혹시 다른 궁금한 점이 발생하시면, 언제든지 추가 질문해주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
와우 감사합니다 헤헤