[Next.js] App Router - 네비게이팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다.
3.6) 페이지 라우터 정리

3.6 네비게이팅

1. 페이지 요청

2. 넥스트 서버로부터 이동할 페이지에 필요한 모든 컴포넌트들이 포함된 JS Bundle 파일 받음

3. Bundle 파일을 브라우저 차원에서 실행

4. 현재 페이지에 맞도록 컴포넌트 교체

JS Bundle 생성이 오래걸린다면 이동가능한 페이지의 Bundle을 미리 불러오는 프리페칭(Pre-Fetching) 기능도 수행가능

page router와 크게 다르지 않다.

서버 컴포넌트가 추가되었기 때문에 이 부분을 위한 중요한 차이점이 존재한다.

1. 페이지 요청

2. 넥스트 서버로부터 JS Bundle 파일 받음 -> Client Component들의 Bundle

3. 넥스트 서버로부터 RSC payload 전달 받음

JS Bundle에서는 서버 컴포넌트가 제외되었기 때문에 서버 컴포넌트와 클라이언트 컴포넌트의 혼합된 페이지를 만들기 위해 RSC Payload를 전달한다.

4. Bundle을 실행하며 RSC Payload와 합쳐 페이지를 적절히 교체하게 된다.

network 탭에서 확인해보면 아래와 같은 RSC Payload를 확인할 수 있다.

프로덕션 모드로 실행을 하면 이동할 수 있는 페이지에 대해서 프리페칭이 가능한 것을 알 수 있다.

RSC Payload는 모든 페이지에 대해서 전달이 되지만, JS Bundle은 특정 페이지만 전달되는 것을 볼 수 있다.

이는 인덱스 페이지와 같은 페이지는 Static 페이지이기 때문에 RSC Payload와 JS Bundle 모두 전달이 되지만,

[id].tsx와 같은 페이지는 Dynamic 페이지이기 때문에 데이터의 업데이트가 향후에 필요할 수 있어서 JS Bundle은 제공되지 않는 것이다.