Server Components

React에서 컴포넌트의 목적에 따라 렌더링할 위치를 선택할 수 있다.
페이지를 작은 컴포넌트들로 나누면, Non-interactive 컴포넌트는 서버 컴포넌트로 렌더링할 수 있다. => Next.js의 server-first 접근

서버 컴포넌트의 장점

개발자들이 서버 인프라를 더 잘 활용할 수 있다.
초기 페이지 로딩이 빨라지고, client-side 자바스크립트 번들사이즈가 줄어든다.
App Router의 모든 컴포넌트는 기본적으로 서버 컴포넌트이기 때문에 추가 작업없이 자동으로 뛰어난 성능을 가짐.
‘use client’ 를 통해 클라이언트 컴포넌트를 선택적으로 사용할 수 있다.

Client Components

클라이언트 컴포넌트를 사용하면 인터랙션을 추가할 수 있다.
Next.jsdptjsms pre-rendering되고, 클라이언트에서 hydrate된다.

“use client” 지시어

server-only코드와 client 코드 사이에 위치한다. 파일의 가장 상단에 작성되어 서버와 클라이언트 경계를 정의한다. (다른 모듈과, 하위 컴포넌트를 포함해서 클라이언트 번들로 간주함)

서버 컴포넌트 모듈 그래프의 컴포넌트는 서버에서만 렌더링되도록 보장됨
클라이언트 컴포넌트 모듈 그래프의 컴포넌트는 주로 클라이언트에서 렌더링되지만, Next.js에서는 서버에서 미리 렌더링 후 클라이언트에서 하이드레이션 가능

패턴

클라이언트 컴포넌트를 tree의 leaves로 옮기기
필요한 컴포넌트만 클라이언트 컴포넌트로 사용

클라이언트 및 서버 컴포넌트 구성

React의 렌더링

• 서버에서, React는 모든 서버 컴포넌트를 클라이언트에 결과를 보내기전에 렌더링한다. (클라이언트 컴포넌트 내부의 서버 컴포넌트도 포함, 이 단계에서 발생하는 클라이언트 컴포넌트는 스킵함)
• 클라이언트에서, React는 클라이언트 컴포넌트를 렌더링하고, 서버 컴포넌트의 렌더링 결과를 삽입하여 병합한다

클라이언트 컴포넌트 내부의 서버 컴포넌트

클라이언트 컴포넌트로 서버 컴포넌트를 import 하는 것은 추가적인 server round trip(왕복)이 필요하기 때문에 제한이 있다. -> 지원하지 않는 패턴

대신에, 서버 컴포넌트를 클라이언트 컴포넌트에 props로 전달하면 된다. -> 추천하는 패턴
서버 컴포넌트의 holes를 표시하면, 서버 컴포넌트는 서버에서 렌더링되고, 클라이언트 컴포넌트가 클라이언트에서 렌더링 될때, holes는 서버 컴포넌트의 렌더링 결과로 채워진다. 이 holes는 children prop로 만든다.

서버에서 클라이언트 컴포넌트로 props 전달(Serialization)

props는 직렬화가 가능해야 한다.(함수, 날짜 전달 불가)

네트워크 경계
서버 컴포넌트와 클라이언트 컴포넌트 사이.
서버 컴포넌트 내부에서 가져온 데이터는 클라이언트 컴포넌트로 전달되지 않는 한 직렬화할 필요가 없음.

서버 전용 코드를 클라이언트 컴포넌트에서 제외하기(Poisoning)

모듈은 서버, 클라이언트 모두에서 공유할수 있기때문에 혹시나…서버에서만 실행되어야할 코드가 클라이언트에 포함될 수 있음

“Server only” 패키지

의도치않은 클라이언트의 서버 코드사용을 방지하기 위한 패키지.
서버온리 코드에 해당 모듈을 Import 하면 클라이언트에서 해당 코드를 사용할때 빌드오류가 발생한다.

Data Fetching

클라이언트 컴포넌트에서 데이터를 가져올땐 서버 컴포넌트에서 가져오는 것이 좋다.(성능, 사용자 경험 향상)

Third-party packages

현재 use-client 를 명시하지 않은 써드파티 패키지들이 많기 때문에 서버컴포넌트에서 해당 컴포넌트를 사용하면 오류가 발생할 수 있다. 따라서 해당 컴포넌트를 랩핑해서 use client를 명시해주면 오류없이 사용할 수 있다.

Context

Next.js13에서 context는 클라이언트 컴포넌트내에서는 지원되지만, 서버 컴포넌트에서는 사용할 수 없다.

클라이언트 컴포넌트에서 context 사용하기

클라이언트 컴포넌트에서는 모든 context API를 사용할 수 있다. 하지만 루트에서 provider를 렌더링하는 경우, 서버 컴포넌트때문에 오류가 발생한다. 따라서 클라이언트 컴포넌트내부에서 provider를 만들고 렌더링해야한다. (전체 html말고 children만 랩핑하도록 하자 -> 최적화)

서버 컴포넌트에서 third-party context provider 렌더링하기

Use-client가 없는 경우 클라이언트 컴포넌트를 따로 만들어서 랩핑하면 된다.

서버 컴포넌트 사이에서 데이터 공유하기

React의 상태 필요없이, 네이티브 자바스크립트 패턴을 사용할 수 있다. 예를들면 모듈을 사용해서 여러 서버 컴포넌트에서 공유할 수 있다.

서버 컴포넌트에서 fetch request 공유하기

데이터를 사용하는 컴포넌트와 데이터를 패칭을 같이 배치하는 것이 좋다. 패칭요청은 서버 컴포넌트에서 자동으로 중복제거되므로, 중복요청에 대한 걱정없이 필요한 데이터를 정확하게 요청할 수 있다. Next.js에서는 fetch cache를 통해 같은 값을 가져올수 있다.