App Router와 Server Components

이 포스팅은 Vercel - Next.js 'Getting Started App Router Docs (beta)' 문서를 참고해 작성했습니다.

 

1. App Router

지난 몇 개월 동안 Next.js 팀에서는 React 18버전의 React Server Components 개념을 Next.js로 가져오는 작업을 해왔다. Next 13 demo 버전을 선택할 경우 이와 관련된 몇몇 기능들을 app 이라는 새로운 디렉토리에서 사용할 수 있다.

 

2. 기능 개요

1. Routing

layouts, nested routing, loading states, error handling 등을 지원하는 Server Components를 구축한 새로운 파일 시스템 기반 라우터

2. Rendering

Client, Server Components를 사용한 Client-side, Server-side 렌더링 지원.
Next.js가 설치된 서버에서 Static과 Dynamic 렌더링이 이전보다 더 최적화 됨.
Edge 및 Node.js 런타임에 스트리밍

3. Data Fetching

React Componets의 async/await 지원과 React와 웹 플랫폼에 맞는 'fetch()' API를 사용해서 데이터 가져오는 작업 간소화

4. Caching

Server Components와 client-side 탐색에 최적화된 새로운 Next.js HTTP 캐시 및 client-side 캐시

5. Optimizations

브라우저의 lazy loading으로 'Image' 컴포넌트 개선.
자동 폰트 최적화 기능이 있는 모듈 추가

6. Transpilation

로컬 패키지(예: monorepos) 혹은 외부 패키지(예: node_modules)의 dependencies를 자동 트랜스파일 및 번들링

7. API

Next.js 전반에 걸친 API 설계 업데이트

8. Tooling

Webpack보다 최대 700배 빠른 Rust 기반 Turbopack 소개

 

3. Server Components

React가 UI를 설계하는 방법에 대한 생각을 바꾸게 만들었듯이, React Server Components는 서버와 클라이언트를 활용하는 앱을 구축하기 위한 새로운 모델을 소개한다.

React가 전체 앱을 클라이언트에서 렌더링하는 대신, 이제는 목적에 맞게끔 렌더링할 컴포넌트를 선택할 수 있는 유연성을 제공한다.

[출처 - Next.js Docs]

우리가 페이지를 작은 컴포넌트 단위로 쪼개고 싶을 경우, 대부분의 components는 유저와 상호작용이 필요없기에 Server Components로써 서버에서 렌더링해도 된다는 것을 깨닫게 된다. 그 와중에 대화형 유저인터페이스의 작은 단위를 위해서 페이지 곳곳에 Client Components를 뿌릴 수 있다. 이 방식은 Next.js에서의 'server-first' 접근 방식과 일치한다.

트랜스파일을 쉽게하기 위해 Server Components는 기본적으로 app 디렉토리로 설정되어있다. 따라서 이를 위한 추가 작업을 할 필요가 없다. 그 이후 필요에 따라 Client Components를 선택적으로 사용할 수 있다.