Next.js 공부를 하는 도중 (한 입 크기로 잘라먹는 Next.js) Pre-Fetching에 대한 내용을 접했다. 전반적인 내용을 다시 정리하고 싶어 이 글을 작성한다.
🐾 Next.js의 Pre-Fetching
Next.js의 Pre-Fetching은 사용자가 현재 보고 있는 페이지에서 이동할 가능성이 높은 다른 페이지의 데이터를 미리 불러와, 페이지 전환 속도를 높이는 기능이다. 이를 통해 페이지 전환 시 데이터를 서버에서 요청하는 과정을 생략하고, 브라우저가 이미 준비된 데이터를 활용하여 빠르게 렌더링할 수 있다.
🐾 Pre-Fetching의 작동 방식
- 초기 접속 및 사전 렌더링:
- Next.js는 초기 접속 시 서버에서 HTML을 생성하여 브라우저에 전달하고, 필요한 JavaScript 번들 파일을 제공한다.
- 초기 접속 후에는 CSR(Client-Side Rendering) 방식으로 페이지가 전환되며, 브라우저가 JavaScript를 실행해 새로운 컴포넌트로 화면을 변경한다.
- Pre-Fetching의 역할:
- 초기 접속 후, 사용자가 특정 링크를 클릭하기 전에 Next.js는 해당 페이지의 JavaScript 번들 파일을 미리 불러온다.
- 이를 통해 페이지 이동 시 추가적인 서버 요청 없이 빠르게 화면을 렌더링할 수 있다.
- 활성화 조건:
- Pre-Fetching은 기본적으로 Next.js의
Link컴포넌트를 사용할 때 자동으로 활성화된다. - 개발 모드에서는 동작하지 않으며, 프로덕션 환경에서만 활성화된다.
🐾 Pre-Fetching의 필요성
Next.js는 초기 접속 시 현재 페이지에 필요한 JavaScript만 전달한다. 모든 페이지의 JS 번들을 한꺼번에 전달하면 용량이 커지고 하이드레이션(Hydration) 시간이 증가하여 TTI(Time To Interactive)가 늦어질 수 있다. 따라서, Pre-Fetching을 통해 필요한 페이지의 JS 파일을 미리 로드하여 효율적인 페이지 전환을 가능하게 한다.
🐾 Pre-Fetching과 데이터 유형
Pre-Fetching은 JavaScript와 CSS 같은 정적 리소스를 미리 불러오는 데 사용된다.
SSR(Server-Side Rendering) 방식에서 getServerSideProps 함수는 Pre-Fetching 단계에서 실행되지 않는다.
이미지와 같은 리소스는 미리 로드되지 않으며, 화면에 표시되는 이미지만 최적화된 방식으로 처리된다.
🐾 Pre-Fetching이 실제로 동작하는 모습
Next.js가 Link 컴포넌트를 통해 연결된 페이지의 JS 번들을 미리 가져와 캐싱한 모습이다. 네트워크 탭에서 prefetch cache로 표시된 것을 확인할 수 있다. 이를 통해 사용자가 해당 링크를 클릭하면 추가적인 네트워크 요청 없이 즉시 페이지가 렌더링된다.
🐾 결론
Next.js의 Pre-Fetching은 페이지 전환을 빠르게 만들어 사용자 경험을 더욱 쾌적하게 하는 중요한 기능이다. 덕분에 사용자는 클릭하자마자 새로운 페이지가 즉시 떠오르는 듯한 부드러운 전환을 경험할 수 있다. 특히, 여러 개의 페이지를 오가며 데이터를 자주 불러와야 하는 웹사이트에서는 이 기능이 큰 차이를 만들어낸다. 규모가 큰 애플리케이션에서도 효율적인 데이터 로딩을 도와 성능 저하 없이 원활한 화면 전환을 제공할 수 있다.
