Next.js에서는 기본적으로 라우트가 서버에서 렌더링된다.

이는 새로운 라우트를 보여주기 전에 클라이언트가 서버 응답을 기다려야 하는 상황이 자주 발생함을 의미한다.

Next.js는 이러한 문제를 해결하기 위해 내장된 프리페치(prefetch), 스트리밍(streaming), 클라이언트 사이드 전환(client-side transitions) 기능을 제공하여 내비에기션이 빠르고 반응성 있게 유지되도록 한다.

이 페이지에서는 Next.js에서 내비에기션이 어떻게 동작하는지, 그리고 동적 라우트(dynamic routes)나 느린 네트워크 환경에서 이를 최적화하는 방법을 설명한다.

1. How navigation works

Next.js에서 내비게이션이 어떻게 작동되는지 이해하려면, 다음 개념들을 알고 있는 것이 도움된다.

1-1. Server Rendering (서버 렌더링)

Next.js에서는 layout과 page가 기본적으로 React Server component이다.

초기 렌더링과 이후의 내비게이션 모두, Server Component Payload가 서버에서 생성되어 클라이언트로 전송된다.

서버 렌더링은 렌더링 시점에 따라 두 가지 방식으로 나뉜다.

  1. Static Rendering (정적 렌더링, 혹은 사전 렌더링): 빌드 시점 또는 리밸리데이션(revalidation) 시점에 렌더링되고, 결과가 캐싱된다.
  2. Dynamic Rendering (동적 렌더링): 클라이언트 요청에 따라 요청 시점에 렌더링된다.

서버 렌더링의 단점은, 새로운 라우트를 표시하기 전에 클라이언트가 서버 응답을 기다려야 한다는 점이다.

Next.js는 이를 개선하기 위해 프리페치 및 클라이언트 사이드 전환 기능을 제공한다.