데브허브 | DEVHUB | How To Speed Up Next.js Navigation (and avoid expensive mistakes)How To Speed Up Next.js Navigation (and avoid expensive mistakes)
- Next.js의 SSR(서버 사이드 렌더링) 특성상 페이지 로딩이 서버 응답을 기다려 느리게 느껴질 수 있습니다. 🐢
loading.tsx 파일 또는 React Suspense 경계를 사용하여 클릭 즉시 로딩 스켈레톤을 표시하여 사용자에게 즉각적인 시각적 피드백을 제공하세요. 🖼️
- Next.js의 기본 기능인 프리페칭(Prefetching)을 활용하여 링크가 뷰포트에 들어올 때 미리 페이지를 로드하여 실제 탐색 시 즉각적인 경험을 제공합니다. ⚡
- 과도한 프리페칭(예: 많은 링크가 있는 페이지)은 불필요한 리소스 소비와 비용 증가로 이어질 수 있으므로 주의해야 합니다. 💸
- 과도한 프리페칭을 피하려면 특정 링크에 대해 프리페칭을 비활성화하거나, 마우스 오버 시 트리거되는 프리페칭, 또는 Foresight와 같은 고급 라이브러리를 고려하세요. 💡
- 동적 라우트의 경우
generateStaticParams 함수를 사용하여 빌드 시점에 가능한 모든 페이지를 미리 생성함으로써 동적 라우트를 정적으로 만들어 탐색 속도를 크게 향상시킬 수 있습니다. 🏗️