클라이언트 측 탐색
Link 컴포넌트는 같은 Next.js 앱 내의 두 페이지 간의 클라이언트 측 탐색을 가능하게 합니다.
클라이언트 측 탐색은 페이지 전환을 JavaScript를 사용하여 처리하는 것을 의미하며, 브라우저에 의한 기본적인 탐색보다 빠릅니다.
다음과 같은 간단한 방법으로 이를 확인할 수 있습니다.
- 브라우저의 개발자 도구를 사용하여 <html>의 배경 CSS 속성을 노란색으로 변경하세요.
- 링크를 클릭하여 두 페이지 간을 이동하세요.
- 노란색 배경이 페이지 전환 사이에 유지되는 것을 볼 수 있습니다.
이를 통해 브라우저가 전체 페이지를 로드하지 않으며 클라이언트 측 탐색이 작동함을 알 수 있습니다.
<a href="..."> 대신에 <Link href="...">를 사용한 경우에는 브라우저가 전체 새로 고침을 수행하기 때문에 링크 클릭 시 배경 색상이 지워질 것입니다.
코드 분할과 프리페칭
Next.js는 코드 분할을 자동으로 수행하여 각 페이지가 해당 페이지에 필요한 부분만 로드하도록 합니다. 따라서 홈페이지가 렌더링할 때 다른 페이지의 코드는 초기에 로드되지 않습니다.
이를 통해 수백 개의 페이지가 있더라도 홈페이지가 빠르게 로드됩니다.
요청한 페이지에 대한 코드만 로드하는 것은 페이지를 격리시킵니다. 특정 페이지에서 오류가 발생하더라도 나머지 애플리케이션이 작동할 수 있습니다.
뿐만 아니라 Next.js의 프로덕션 빌드에서는 Link 컴포넌트가 브라우저의 뷰포트에 나타날 때마다 연결된 페이지의 코드를 백그라운드에서 자동으로 프리페칭합니다. 따라서 링크를 클릭할 때 목적지 ㅍ ㅔ이지의 코드가 이미 백그라운드에서 로드되어 페이지 전환은 거의 즉각적으로 이루어집니다!
요약
Next.js는 자동으로 코드 분할, 클라이언트 측 탐색, 프리페칭(프로덕션에서)을 통해 애플리케이션을 최상의 성능으로 최적화합니다.
페이지는 pages 디렉토리 아래의 파일로 생성하고 내장된 Link 컴포넌트를 사용합니다. 라우팅 라이브러리는 필요하지 않습니다.
Link 컴포넌트에 대한 자세한 내용은 next/lnik의 API 참조와 라우팅 전반에 대한 내용은 라우팅 문서에서 더 알아볼 수 있습니다.
참고 : Next.js 앱 외부의 외부 페이지에 링크해야 할 경우 Link 없이 <a> 태그를 사용하면 됩니다.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] NextJS - Assets, Metadata, and CSS #1 (0) | 2023.08.15 |
|---|---|
| [공식문서] NextJS - Assets, Metadata, and CSS #2 (0) | 2023.08.15 |
| [공식문서] NextJS 페이지 간 이동하기 #4 (0) | 2023.08.14 |
| [공식문서] NextJS 페이지 간 이동하기 #3 (0) | 2023.08.14 |
| [공식문서] NextJS 페이지 간 이동하기 #2 (0) | 2023.08.14 |
