# Addy Osmani 의 Next.js App Router 와 React Server Component 에 대한 설명

> Clean Markdown view of GeekNews topic #9123. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=9123](https://news.hada.io/topic?id=9123)
- GeekNews Markdown: [https://news.hada.io/topic/9123.md](https://news.hada.io/topic/9123.md)
- Type: news
- Author: [ragingwind](https://news.hada.io/@ragingwind)
- Published: 2023-05-08T08:37:27+09:00
- Updated: 2023-05-08T08:37:27+09:00
- Original source: [addyosmani.com](https://addyosmani.com/blog/react-server-components-app-router/)
- Points: 12
- Comments: 0

## Topic Body

- Addy Osmani 은 구글 크롬팀 소속이며 TodoMVC, HNPWA 의 프로젝트 프로모션을 진행할 정도로 Framework, 라이브러리에 대해서 잘 다룸  
- RSC?  
	- 컴포넌트 트리 구성의 필수 요소로 데이터 가져오기를 통합하여 최상위 대기 및 서버 측 데이터 직렬화를 가능  
	- RCS 는 서버에서 실행 되는 Stateless React Component, 서버와 클라이언트 컴포넌트 사이에서 유지보수 가능한 코드들을 재사용을 쉽게 할 수 있는 경험( (`knitting`) 제공  
	- MPA 유사한 아키텍처 위에서 SPA 와 유사한 라우팅을 가능  
	- 실제 구현(제공) 은 프레임워크 별로 다를 것  
	- React 팀은 널리 보급되어 생태계에 영향을 줄 것으로 판단. React 팀의 Dan 은 Server Component 는 앱 데이터 흐름의 뼈대를 이루며 Client Component 는 그 뼈를 둘러싸는 고기 같은 것이라고 비유  
- Next.js App Router 와 Server Component 는 어떻게 연동되어 있을까?  
	- Next.js 13+ 이후에 RSC 지원  
	- `app`  경로 안에 Component 들은 RSC 가 자동 지원  
	- RSC 는 서버 사이드 인프라와 디펜던시 활용에 장점을 이용하여 나은 성능과 더 작은 번들 사이즈 지원  
	- Next.js App Router 는 서버-렌더링과 클라이언트-렌더링 혼용하여 점진적으로 앱을 향상해 사용자의 경험을 자연스럽게 만듦. Client Component 명시해서 사용 가능하고 (`use client`) 동일한 컴포넌트 트리에 교차로 배치 가능  
	- Next.js App Router 를 사용한 좋은 경험들이 나오고 있음  
- 그 외에 관련된 다양한 주제들이 있으니 읽어보세요.

## Comments



_No public comments on this page._