클라이언트 측 탐색(Client-Side Navigation)
Link 컴포넌트는 동일한 Next.js 앱에서 두 페이지 간에 클라이언트 측 탐색(Client-Side Navigation)을 가능하게 합니다.
클라이언트 측 탐색은 페이지 전환을 JavaScript를 사용하여 수행하므로, 브라우저가 수행하는 기본 탐색보다 더 빠릅니다.
다음은 확인하는 간단한 방법입니다:
- 브라우저의 개발자 도구를 사용하여
<html>의backgroundCSS 속성을yellow로 변경합니다. - 링크를 클릭하여 두 페이지 간을 이동합니다.
- 페이지 전환 사이에 노란색 배경이 유지되는 것을 볼 수 있습니다.
이를 통해 브라우저가 전체 페이지를 다시로드하지 않으며 클라이언트 측 탐색이 작동하는 것을 확인할 수 있습니다.
만약 <Link href="..."> 대신 <a href="...">을 사용하고 위의 방법을 시도했다면, 링크를 클릭할 때 브라우저가 전체 새로고침을 수행하기 때문에 배경 색상이 지워질 것입니다.
코드 분할과 미리 가져오기(Code splitting and prefetching)
Next.js는 자동으로 코드 분할을 수행하여 각 페이지가 해당 페이지에 필요한 내용만 로드합니다. 이는 홈페이지가 렌더링될 때 다른 페이지의 코드가 초기에 제공되지 않음을 의미합니다.
이렇게 하면 수백 개의 페이지가 있더라도 홈페이지가 빠르게 로드됩니다.
요청한 페이지에 대한 코드만 로드하기 때문에 페이지는 격리되게 됩니다. 특정 페이지에서 오류가 발생하더라도 나머지 애플리케이션은 정상적으로 작동합니다.
또한, Next.js의 프로덕션 빌드에서는 브라우저의 뷰포트에 Link 컴포넌트가 나타날 때마다 Next.js가 연결된 페이지의 코드를 백그라운드에서 자동으로 미리 가져옵니다. 따라서 링크를 클릭할 때 목적지 페이지의 코드가 이미 백그라운드에서 로드되어 페이지 전환 시 거의 즉시 로딩됩니다!
요약
Next.js는 코드 분할, 클라이언트 측 탐색 및 미리 가져오기(프로덕션 환경에서)를 통해 애플리케이션의 최상의 성능을 자동으로 최적화합니다.
pages 디렉토리 아래의 파일로 라우트를 생성하고 내장된 Link 컴포넌트를 사용합니다. 라우팅을 위해 별도의 라우팅 라이브러리가 필요하지 않습니다.
Link 컴포넌트에 대한 자세한 내용은 next/link의 API 참조 및 일반적인 라우팅에 대한 라우팅 문서에서 자세히 알아볼 수 있습니다.
참고: Next.js 앱 외부의 외부 페이지에 링크해야 할 경우,
Link없이<a>태그를 사용하면 됩니다.
출처: https://nextjs.org/learn/basics/navigate-between-pages/client-side
