App Router

• Next 13부터 지원되는 라우팅 방식
• Page Router와 같이 사용이 가능하다.
• 같이 사용 가능한 이유는 Page Router 방식에서 App Router 방식으로 변경되면서 많은 부분들이 바뀌었기 때문에 기존에 Page Router 방식으로 개발해놨던 프로젝트들을 점진적으로 App Router 방식으로 바꿀 수 있도록 지원하기 위해서다.

App Router 방식에서 소개된 새로운 기능들

• 공식 문서에서는 대표적으로 3가지를 소개하고 있다.

  1. Server Components
  2. Streaming with Suspense
  3. Server Actions

Server Components

• 리액트에서 제공하는 리액트 서버 컴포넌트다.

• 넥스트 13부터는 서버 컴포넌트가 기본 컴포넌트가 됐다.

• 기본 컴포넌트로 지정한 이유는 성능 최적화, 개발자들이 서버 컴포넌트에 빠르게 적응할 수 있도록 만들기 위해서라고 한다.

• 서버에서 렌더링이 된다.

• 클라이언트로는 RSC Payload 라는 특수한 객체를 내려보내 클라이언트 컴포넌트와 상호작용할 수 있도록 했다고 한다.

• 서버 렌더링에 사용

• 넥스트의 서버 렌더링에는 3가지 전략이 있다.

  1. 정적 렌더링
  2. 동적 렌더링
  3. 스트리밍

렌더링 전략 3가지

정적 렌더링

• 넥스트 13부터 기본으로 제공되는 렌더링 방식
• 빌드 타임에 렌더링
• 빌드 타임에 데이터 캐싱
• 빌드 결과물은 배포하면 CDN에 전송
• 모든 유저가 똑같은 렌더링 결과를 보는 경우에 해당한다.

  CDN (Content Delivery Network)
  전세계 여러 지역에 분산되어있는 서버로 주로 정적 데이터를 저장하는데 사용된다고 한다.
  클라이언트와 서버의 중간에 위치하여 클라이언트에서 빠르게 캐싱된 파일을 받아볼 수 있도록 한다.

  • CDN은 기본적으로 캐싱 기능이 적용되어 있다.
  • 그러므로 개발자가 따로 서버 설계시 캐싱 기능에 대해 고려하지 않아도 된다.

동적 렌더링

• 클라이언트의 요청 시점에 렌더링
• 유저마다 각자 고유의 데이터를 가지고 있는 경우에 사용할 수 있다.
• 정적 렌더링과 함께 혼용하여 사용할 수 있다.
• 경로마다 렌더링 방식이 다르게 설정되는 식으로 사용 가능하다.
• Next는 네이티브 Fetch API를 상속한 Fetch API를 내장하여 사용하기 때문에 요청마다 캐시 옵션을 다르게 지정할 수 있다.
• 캐싱 기능인 기본 적용이 되어있는데 개발자가 변경 가능하다.
• 원래 브라우저에서 네이티브 Fetch API는 HTTP 캐싱과 상호작용한다.
• 넥스트에서는 네이티브 Fetch API가 캐싱된 데이터와 상호작용 한다.
• Dynamic Function을 사용하는 경우 혹은 캐싱되지 않은 데이터를 사용하는 경우에는 전체 경로가 동적 렌더링 된다.

  Dynamic Function

  • Cookies(), Headers() 함수: 서버 컴포넌트에서 이 함수들을 사용하는 경우에는 요청 타임에 전체 경로가 동적 렌더링된다.
  • searchParams: Page.tsx 파일에서 prop으로 사용하는 경우 요청 타임에 해당 페이지를 동적 렌더링 방식으로 변경한다.

스트리밍

• 서버에서 컴포넌트가 렌더링될때마다 클라이언트로 보내는 방식
• 페이지가 순차적으로 부분 렌더링이 된다.
• 특정 UI 컴포넌트에서 사용하는 네트워크 통신이 지연되는 경우 전체 페이지 렌더링을 막을 수가 있는데 이를 방지해줄 수 있다.