Routing(라우팅)
네트워크 용어로써 주소에 연결되어 있는 주소에 연결되어 있는
데이터를 사용하는 일련의 과정을 의미한다.
(데이터 패킷이 출발지에서 목적지까지 전달되는 경로를 결정하는 과정)
데이터 패킷(Data Packet)은 네트워크에서 데이터를 전송할 때 나누는 데이터 단위
쉽게 URL구성하고 조직하는 행위 자체를 Routing이라고 한다.
Next에서는 파일 시스템 기반으로 Routing시스템을 도입했다.
Navigation(내비게이션)
네트워크 용어에서 사용자가 페이지 간 이동을 할 수 있도록 돕는
다양한 UI 요소와 시스템을 의미한다.
Next에서는 Link 태그와 useRouter를 사용해서 페이지 이동이 가능
Code spliting(코드 스플리팅)
애플리케이션의 JavaScript 코드를 더 작은 청크(chunk)나 번들로 분할하여,
초기 로드 시간을 줄이고, 페이지 전환 시 필요한 코드만 로드하여
각 접근 지점에 필요한 작은 청크(번들보다 더 작은)로 분할하는 과정이다.
참고블로그 : https://npmkorean.tistory.com/39
Next.js는 코드 분할을 자체적으로 지원하며 server에서 일어난다.
route segment기준으로 pages 폴더 안에 각 파일이 빌드하는 동안
자체 자바스크립트 번들로 자동 코드 분할한다.
예시) 현재 /home 경로에 있다면 /example 경로에 들어가기 전까지
/example경로에 파일은 가져오지 않는다.
Prefetch(프리패치)
Prefetch는 사용자가 아직 요청하지 않은 리소스를 미리 로드하는 기술로
브라우저나 웹 애플리케이션에서 페이지나 리소스를 미리 로드하여,
빠르게 접근할 수 있도록 성능을 최적화하는 방법
Next에서의 Prefetch는 프로덕션 환경에서만 활성화된다.
중요한 부분은 어떻게 미리 파일들을 가져오는 부분인데
Next 공식문서에서는 다음과 같이 설명해 준다.
서버에서의 렌더링
Next.js는 React의 API를 사용하여 서버에서 렌더링을 조율하며,
렌더링 작업은 각 경로(segment)와 Suspense Boundary(지연 경계)로 나누어진다.
- React는 서버 컴포넌트를 특별한 데이터 형식인
React Server Component Payload(RSC Payload)로 렌더링 한다. - Next.js는 이 RSC Payload와 클라이언트 컴포넌트의
자바스크립트 명령을 사용하여 서버에서 HTML을 생성한다.
React Server Component Payload(RSC Payload)
RSC Payload는 렌더링 된 React 서버 컴포넌트 트리를 표현하는
압축된 이진 형식입니다.
Payload는 클라이언트에서 React가 브라우저의
DOM을 업데이트하는 데 사용된다.
RSC Payload는 항목들
- 서버 컴포넌트의 렌더링 결과
- 클라이언트 컴포넌트가 렌더링 될 자리와 해당 자바스크립트 파일에 대한 참조
- 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 props
Link컴포넌트
Link 컴포넌트를 사용했을 때 href에 할당한 route segment를 기준으로
해당 url의 관련된 RSC payload 파일을 미리 prefetch를 해오기 때문에
빠른 렌더링이 가능하다.
next Link:
https://nextjs.org/docs/pages/api-reference/components/link#prefetch
Link 태그를 사용하지 않고 router.push를 사용했을 때는
prefetch가 되지 않는다. 이때 rotuer.prefetch를 사용해서
prefetch기능을 사용할 수 있다.
참고 영상:
https://www.youtube.com/watch?v=5UX23AOqVvM&t=19s