[Next.js] Next.js의 Page간 탐색

🧭 클라이언트 측 탐색(Client-Side Navigation)

<Link> 컴포넌트는 Next.js 앱의 두 페이지 간의 클라이언트 측 탐색(Client-Side Navigation)이 가능하다.

클라이언트 측 탐색이라 함은 브라우저에서 수행하는 기본 탐색보다 빠른 JavaScript를 사용하여 페이지 전환이 발생한다는 의미이다.

 

Next.js 공식 문서에는 이를 확인하는 방법이 나와있다.

 

왼쪽은 test페이지, 오른쪽은 test1페이지이다.

 

위의 사진과 같이 페이지를 두개 만들어 놓는다.

나는 test.js, test1.js 파일을 만들어 코딩했다.

 

브라우저의 개발자 모드에서 background색을 임의로 aqua로 지정한 모습

이렇게 배경을 임의로 지정하고 링크를 눌러본다.

 

Link를 눌러서 test 사이트로 이동한 모습

<Link>를 눌러서 이동했음에도 배경색이 유지되는 모습을 볼 수 있다.

보통 <a> 태그를 사용하면 브라우저가 한번 새로고침(refresh)되면서 페이지가 다시 출력되는 것(방금 든 예시처럼 background 색을 지정해놓으면 지워짐)을 볼 수 있는데,

Next.js의 <Link>는 전체 페이지를 로드하지 않고 클라이언트 측 탐색(Client-Side Navigation)을 작동시킨다는 것을 알 수 있다.

 

---

🛠️ 코드 분할(Code splitting) 및 prefetching

Next.js는 코드 분할(Code splitting)을 자동적으로 수행한다.

각 페이지는 해당 페이지에 필요한 것만 로드한다.

홈페이지(지금 필요한 페이지를 말하는 것 같음)를 랜더링할 때 다른 페이지의 코드는 처음부터 가져오지 않는다.

이렇게 해서 수백 페이지가 있는 경우에도 빠르게 페이지가 로드될 수 있게 한다.

요청한 페이지의 코드만 로드하게 되면 페이지가 격리되는 효과가 일어나서 특정 페이지에서 오류가 발생해도

나머지 Application(다른 페이지를 말하는 것 같음)에서는 계속 작동하게 되는 장점이 있다.

(테스트 해보니 한 페이지에서 오류나도 다른 페이지는 멀쩡히 작동하였다.)

 

또한, Next.js의 production build에서 <Link> 컴포넌트가  브라우저의 뷰포트(Viewport)에 나타날 때마다

Next.js는 Background에서 <Link>로 연결된 페이지에 대한 코드를 자동으로 미리 가져온다.

그래서 <Link>를 클릭할 때 이미 대상 페이지의 코드가 Background에서 로드되고 페이지 전환이 바로바로 이루어지게 된다. 이것을 prefetching이라고 한다.

 

그리고 해당 <Link>가 가리키는 페이지를 미리 로드하고 싶지 않다면 다음과 같이 코드를 작성하면 된다.

<Link href='...' prefetch={false}>

<Link>가 가리키는 다음 페이지의 코드를 가져오는 것을 prefetching이라고 하는데 이 기능을 false로 꺼주면 된다.

 

참고로 Next.js 앱 외부의 다른 사이트(또는 페이지)를 연결하고 싶으면

<Link> 태그 없이 <a>태그만을 사용해야 한다.

그리고 className과 같은 특성을 추가해야 하는 경우, <Link> 태그가 아닌 <a> 태그에 추가해야 한다.

 

<Link> 컴포넌트에 대한 더 자세한 설명은 이곳에서 확인할 수 있다.(추가로 라우팅에 대한 설명은 이곳)