인프런 커뮤니티 질문&답변
작성한 질문수
book 페이지 스트리밍 적용
해결된 질문
작성
·
34
0
book 페이지는 일부는 정적으로 실행되고,
일부는 동적으로 실행되는 걸로 알고 있습니다.
generateStaticParams에 설정된 id는 정적으로,
설정되지 않은 id는 동적으로 실행된 후 이후부터
정적으로 실행됨
위와 같이 알고 있는데
만약 이러한 페이지에 loading.tsx를 만들어서
적용한다면, 새로운 id로 요청할 때만
스트리밍이 적용되는 것이라고 이해하면 될까요?
이전 강의에서 generateStaticParams에 설정된
id는 fetch와 같은 동적 함수가 있더라도
정적 페이지처럼 저장된 데이터를 가져온다고 기억해서요
답변 2
0
안녕하세요 이정환입니다.
네네 맞습니다. loading.tsx나 Suspense를 이용해 런타임(빌드 타임 이후에) 새롭게 생성되는 페이지에 한해 스트리밍을 설정할 수 있습니다
0
안녕하세요, 인프런 AI 인턴입니다. jhp009님.
질문하신 내용은 Next.js의 동적 경로 처리와 관련한 일반적인 이해에 관한 것입니다. 특히 generateStaticParams와 loading.tsx를 이용하여 페이지 로딩과 스트리밍을 어떻게 처리할 수 있는지에 대한 궁금증을 가지고 계신 것 같습니다.
동적 경로와 스트리밍
정적 및 동적 경로 처리:
generateStaticParams에서 설정된 ID는 빌드 시 정적으로 생성됩니다. 덕분에 이 페이지들은 빠르게 로드되며, 이는 전형적인 정적 페이지처럼 작동하게 됩니다. 반면, 설정되지 않은 ID는 요청 시 서버에서 페이지가 동적으로 생성됩니다.loading.tsx와 스트리밍: Next.js에서loading.tsx파일은 페이지 로드 시 로딩 스피너나 로딩 메시지 등을 사용자에게 표시하기 위한 것입니다. 새롭게 생성되는 ID에 대해 동적로딩 할 때, 로딩 상태가 표시되며 이는 사용자가 데이터를 요청하고 기다리는 동안 제공됩니다.캐시 및 재사용: 새롭게 생성된 동적 페이지는 이후 요청 시부터 정적 페이지처럼 캐시되어 사용됩니다. 따라서 초기 요청 시의 동적 렌더링 이후에는 정적 캐시 데이터처럼 작동하게 되어 페이지 로딩 속도가 비교적 빠르게 됩니다.
추가 참고
fetch함수 및 정적 데이터:generateStaticParams에 포함된 ID에 대해서는 fetch 요청이 포함되어 있더라도 빌드 시 데이터를 미리 가져와서 저장하므로, 정적 페이지로 처리됩니다.관련 참고 링크:
- Next.js Static and Dynamic Rendering: 이 링크를 통해 Next.js의 정적 및 동적 렌더링 방법에 대해 더 깊이 이해하실 수 있습니다.
- Next.js Static and Dynamic Rendering: 이 링크를 통해 Next.js의 정적 및 동적 렌더링 방법에 대해 더 깊이 이해하실 수 있습니다.
위 설명이 궁금증을 해결하는데 도움이 되었기를 바랍니다. 필요한 경우 추가 질문 남겨주세요. 😄
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.