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

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

2번 과정에서 사용자가 실제로 /c 를 클릭할 때에 서버가 getServerSideProps를 통해 데이터를 페칭하는 것은 맞지만, HTML을 새롭게 그려내는 것은 아닙니다. HTML은 브라우저측에서 프리페칭된 /c 경로의 JS Bundle을 통해 클라이언트 사이드 렌더링 방식으로 그려냅니다.

이 과정은 리액트에서의 페이지 이동과 동일하다고 이해하시면 쉽습니다.

브라우저의 입장에서 보면 /a 페이지에 접속한 시점에, 이미 프리페칭을 통해 /c 페이지의 JS Bundle 까지 받아둔 상태이기 때문에

실제로 /c 페이지로 이동할 때 지금까지 전달받은 JS Bundle(리액트 컴포넌트들)만으로도 /c 페이지의 HTML을 생성할 수 있습니다.

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

Next.js의 데이터 패칭과 프리패칭의 흐름에 대해 상세하게 정리해 주셨네요. 한 번 살펴보고 설명드리겠습니다.

기본적인 흐름 설명

Next.js는 페이지 전환 시 성능 최적화를 위해 프리패칭과 같은 다양한 기법을 사용하고 있습니다. 다음은 여러분이 정리하신 내용과 맞닿아 있는 적절한 설명입니다:

1. 프리패칭:

   • 브라우저는 백그라운드에서 /c.js와 같은 코드스플리트된 자바스크립트 파일을 미리 다운로드하여 캐시에 저장합니다.
     
   • 이 단계에서는 데이터 페칭이나 HTML을 서버로부터 직접 가져오지 않습니다.
     

2. 사용자가 링크 클릭 시:

   • 해당 링크를 클릭하면 서버에서 getServerSideProps가 실행되어 필요한 데이터가 패칭됩니다.
     
   • 서버는 SSR(서버 사이드 렌더링) HTML과 데이터(JSON)를 브라우저에 전달합니다.
     

3. 클라이언트 처리:

   • 브라우저는 받은 HTML을 즉시 렌더링하여 FCP(First Contentful Paint)를 제공합니다.
     
   • 캐시에 저장된 /c.js를 사용해 즉각적인 자바스크립트 실행이 이루어지고, 이로 인해 Hydration(React의 HTML과 JS 매칭 및 이벤트 핸들러 연결) 프로세스가 시작됩니다.
     

프리패칭과 성능

프리패칭은 페이지 전환 시 여전히 서버 요청을 필요로 하지만, 자바스크립트 코드가 이미 준비되어 있기 때문에 사용자가 경험하는 페이지 전환 속도가 빨라질 수 있습니다. 이 과정에서 HTML과 데이터 패칭은 서버-클라이언트 간 추가적인 요청이 발생하지만, 자바스크립트 실행은 지연 없이 이루어집니다.

궁금한 점에 대한 추가 설명

1. 프리패칭이 성능에 미치는 영향:

   • 프리패칭된 JS 파일은 저장된 상태이기 때문에 브라우저가 해당 파일을 즉시 사용하여 페이지 렌더링을 빠르게 시작할 수 있습니다.
     
   • 데이터 패칭은 네트워크 요청이 더해지지만, 브라우저가 사용자의 클릭과 거의 동시에 다음 화면을 준비할 수 있도록 도움을 줍니다.
     

2. HTLM과 데이터의 서버 요청:

   • HTML 템플릿과 데이터는 서버에서 생성 및 처리되지만, 프리패칭 덕분에 화면 전환의 느낌은 매끄럽게 유지됩니다.
     

다음 링크도 참조해 보시면 유사한 질문들에 대한 강사님의 답변을 확인할 수 있습니다:
- 섹션2 1.2 페이지 이동 및 데이터페칭 관련 질문

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