개요
App Router는 라우팅 및 내비게이션에 하이브리드 접근 방식을 지원한다.
즉 Next.js는 라우팅 시 서버와 클라이언트를 적절히 섞어서 사용한다.
서버에서 애플리케이션 코드는 경로 세그먼트에 의해 자동으로 분할된다.
예를 들어 app 폴더에 있는 코드끼리 분할되고 dashboard 폴더에 있는 코드끼리 분할된다.
클라이언트에서 Next.js는 경로 세그먼트를 사전 로드하고 캐시한다.
즉 Next.js는 사용자가 다음에 갈 수도 있는 경로를 미리 받아서 캐시한다.
즉 사용자가 새 경로로 네비게이션할 때 모든 페이지를 다시 렌더링하는것이 아닌 바뀐 부분만 바꿔치기한다. 이를 통해 사용자 경험을 향상시킨다.
본 글에서는 Next.js의 코드 분할, 사전 로드, 캐싱, 부분 렌더링, 소프트 네비게이션, 뒤/앞으로 이동, page router 방식과 app router 방식이 모두 있는 프로젝트의 네비게이션에 대하여 다룬다.
Code Spliting
코드 분할은 애플리케이션 코드를 더 작은 번들로 나누어 브라우저가 다운로드하고 실행할 수 있게 한다.
즉 앱의 코드를 한번에 몰아서 처리하지 않고 작은 덩어리(번들)로 나눠서 필요한 순간에만 불러오도록 한다.
Next.js에서는 서버 컴포넌트를 사용할 경우 애플리케이션 코드가 경로 세그먼트에 의해 자동으로 코드 분할된다.
즉 /products 에 있다면 products 관련 코드만 불러오고 /about 에서는 about 관련 코드만 불러온다.
Prefetching
사전 로드는 사용자가 방문하기 전에 백그라운드에서 경로를 미리 로드하는 방법이다.
Next.js에서 경로를 사전 로드하는 방법은 2가지 방식이 있다.
- <Link> 컴포넌트
경로가 사용자의 뷰포트에 보이게 되면 자동으로 사전 로드된다.
ex) 사용자가 스크롤을 내려서 타 링크가 보이기만 해도 사전 로드된다.
- router.prefetch()
useRouter 훅을 사용해서 프로그래밍 방식으로 경로를 사전 로드할 수 있다.
즉 코드에서 특정 경로를 직접 사전 로드하도록 지시한다.
<Link> 컴포넌트의 기본 사전 로드 동작은 첫 번째 loading.js 파일까지의 공유 레이아웃만 사전 로드되어 30초동안 캐시된다.
즉 해당 페이지의 layout.js, template.js, error.js, loading.js 까지만 사전 로드된다.
전체 페이지를 모두 사전 로드할 경우 느려질 수 있기 때문에 해당 경로의 공통 레이아웃까지만 미리 받아둔다.
<Link> 컴포넌트의 prefetch prop을 false로 설정하여 사전 로드를 비활성화할 수 있다. 또는 true로 설정하여 전체 페이지를 사전 로드할 수 있다.
사전 로드는 배포 환경에서만 활성화된다.
Caching
Next.js는 라우터 캐시라는 내부 메모리 캐시가 있다.
사용자가 애플리케이션을 탐색할 때 사전 로드된 경로 세그먼트와 방문한 경로의 React 서버 컴포넌트 결과가 캐시에 저장된다.
이를 통해 유저가 클릭할 때마다 새로운 요청을 하는 것을 방지하여 속도를 향상시킨다.
Partial Rendering
부분 렌더링은 내비게이션 시 변경된 경로 세그먼트만 클라이언트에서 다시 렌더링된다.
예를 들어 /dashboard/settings /dashboard/analytics 간에 네비게이션 수행 시 공통 레이아웃인 /dashboard는 그대로 두고 /settings과 /analytics 페이지만 바꿔치기한다.
Soft Navigation
브라우저간 네비게이션 방식은 2가지가 있다.
- 하드 네비게이션
하드 네비게이션은 페이지를 이동할 때 페이지 전체를 다시 렌더링한다.
- 소프트 네비게이션
소프트 네비게이션은 페이지를 이동할 때 변경된 부분만 다시 렌더링한다.
Next.js는 바뀐 부분만 다시 렌더링하는 소프트 네비게이션을 제공하여 상태를 유지한다.
Back and Forward Navigation
사용자가 뒤로가기&앞으로 가기 버튼을 누를 때 Next.js는 기본적으로 스크롤 위치를 기억하고, 이미 방문한 페이지의 캐시를 재사용한다.
Routing between /pages and /app
page router 방식에서 app router 방식으로 점진적으로 마이그레이션을 할 때, Next.js는 두 영역을 넘나들 때 하드 네비게이션을 수행해야 한다.
page router 방식의 Next.js 프로젝트를 app router 방식으로 마이그레이션하는 경우 알아두면 좋다.
'Next.js' 카테고리의 다른 글
| [Next.js] 리디렉션을 처리하는 여러 방법 (1) | 2025.04.24 |
|---|---|
| [Next.js] Next.js에서의 에러 경계 설정과 스트리밍 기반의 로딩 UI 구현 전략 (0) | 2025.04.20 |
| [Next.js] Next.js 라우팅과 렌더링 원리 (0) | 2025.04.15 |