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

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

generateStaticParams에 1, 2, 3만 리턴한 상황을 말씀하시는 거라면 말씀하신 내용이 맞습니다.

참고로 Static 페이지로 생성되어 있는 페이지들 또한 JS Bundle 전달 + 하이드레이션 과정은 동일하게 이루어집니다.

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

Next.js의 풀 라우트 캐시에 대해 질문해 주셨네요. 질문하신 내용을 기준으로 설명드리겠습니다.

렌더링 과정 설명:

1. URL 요청 (book/4):

   • 프리페칭은 Link 컴포넌트를 통해 연결된 페이지에서 이루어지며, book/4는 직접 URL로 접근하는 경우 프리페칭이 이루어지지 않습니다.
     

2. 서버에서 JS 실행 및 렌더링:

   • 서버에서 해당 경로에 대한 요청을 받으면, 필요한 데이터를 받아와서 페이지를 렌더링합니다. 이 과정은 서버에서 처리되므로 클라이언트가 요청 시점에 서버 컴포넌트를 실행하게 됩니다.
     

3. 렌더링된 HTML 전달:

   • 렌더링된 HTML이 브라우저로 전달되어 초기 화면으로 보여지게 됩니다. 이는 SEO에도 유리한 방식입니다.
     

4. RSC Payload와 JS Bundle 전달:

   • 이후, RSC(React Server Components) Payload와 필요한 JS Bundle들이 브라우저로 전달됩니다. 이 과정에서 클라이언트 측의 리액트 동작과정이 포함됩니다.
     

5. 수화(hydration) 과정:

   • 브라우저에서 전달받은 JS를 통해 수화가 이루어집니다. 이로 인해 클라이언트 측의 상호작용이 가능해집니다.
     

6. 상호작용 가능:

   • 수화 과정이 완료되면, 사용자는 페이지와 상호작용할 수 있습니다.
     

Static Page와 풀 라우트 캐시:

• book/1~3가 static page로 사전 빌드되어 풀 라우트 캐시에 저장되어 있다면, 사용자가 해당 페이지를 요청할 때마다 동적으로 페이지를 생성하지 않고 풀 라우트 캐시에서 저장된 정적 HTML을 즉시 전달받게 됩니다. 이는 빠른 응답 속도를 제공합니다.
  

더 자세한 정보 확인:

이와 관련하여 정적 페이지 캐싱과 ISR 메커니즘에 대해 설명한 링크를 참고해주세요. Next.js의 업데이트된 기능을 활용한 최적화 방법에 대해 더 깊게 이해하실 수 있습니다.

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