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

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

프리페칭은 하나의 페이지에 대해 최초 1회만 발생하게 됩니다. 즉 동일한 페이지를 두번 이상 프리페칭하지 않습니다. 인덱스 페이지에서 바로 이동가능한 페이지가 아닐 경우 인덱스 페이지에 접속했을 때에는 프리페칭이 이루어지지 않습니다. 해당 페이지는 해당 페이지에 접근하는 링크가 렌더링 되어 있는 페이지(또는 router.prefetch가 동작할때)에서 프리페칭 됩니다.

초기 접속시 전달받는 JS Bundle은 초기 접속한 페이지의 컴포넌트만 포함한 JS Bundle입니다. 강의에서 말씀드렸듯 Next.js는 JS Bundle의 용량을 조절하기 위해 페이지별로 자바스크립트 코드를 분리해 번들 형태로 저장합니다. 그리고 초기 접속 요청이 들어왔을 때에는 현재 접속 요청이 들어온 페이지의 번들만 보냅니다.

초기 접속 완료 이후 다른 페이지로 이동할 때에 자바스크립트 번들을 받아오는게 아니라 프리페칭으로 초기 접속이 완료된 이후 다른 페이지로 이동하기 전에 번들을 받아옵니다.

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

Next.js에서 페이지 네비게이션 시 prefetching과 js bundle 요청에 관한 질문을 주셨네요. 이 주제를 이해하는 데는 Next.js의 동작 방식을 이해하는 것이 중요합니다.

네비게이션 및 번들 요청 과정

1. 초기 접속(인덱스 페이지 접속)

   • 초기 접속 시에는 서버에서 SSR로 HTML을 제공하고, 필요한 js 번들이 함께 클라이언트로 전달됩니다.
     

2. 인덱스 페이지에서 이동할 수 있는 모든 페이지에 대한 prefetching

   • Next.js는 링크를 통해 이동할 가능성이 있는 페이지의 js 번들을 미리 클라이언트에 prefetching 합니다. 이 과정은 페이지가 브라우저에 렌더되기 전에 이루어져, 실제로 사용자가 해당 페이지를 방문할 때 로딩 시간을 줄입니다.
     

3. A페이지로 이동 요청

   • 사용자가 A페이지 링크를 클릭하면, 브라우저는 이미 prefetching된 js 번들을 사용하여 이동 과정을 빠르게 처리합니다.
     

4. A페이지에서 필요한 js bundle 서버에 요청(필요한 경우)

   • 만약 A페이지에 관련된 js 번들이 작동 중에 필요하다면(예: 사용자 상호작용에 의해 추가적인 컴포넌트가 필요할 때), 추가적인 js 번들 요청이 발생할 수 있습니다.
     

5. A 페이지로 이동

   • 페이지 이동은 대부분의 경우 클라이언트 사이드에서 이루어지며, 이미 prefetching된 js 번들을 사용하여 빠르게 이루어집니다.
     

6. A페이지에서 이동할 수 있는 모든 페이지에 대한 prefetching

   • A페이지가 로드되면, 해당 페이지에서 연결된 다른 페이지 링크를 위한 prefetching이 시작됩니다.
     

질문의 핵심 포인트

• JS 번들을 최초 1회만 요청하는가, 아니면 페이지 이동 시마다 요청하는가: 초기 접속 시 주요 페이지를 위한 js 번들은 prefetching되지만, 페이지 이동 시 필요한 추가적인 js 번들은 필요에 따라 요청될 수 있습니다. 이는 한번 요청된 js 번들을 네트워크 캐시에 저장하여 재사용하는 프로세스를 활용합니다. 그러나 CSR의 장점은 필요한 js 번들이 이미 클라이언트에 있다면 추가 요청 없이 사용된다는 것입니다.
  

더 자세한 설명을 원하신다면 아래 유사한 내용의 답변을 참고해 보세요:

• nextjs 프리패칭 - 앙엉님과 Winterlood님의 질문과 답변
  

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