[Next.js] 서버 컴포넌트 vs. 클라이언트 컴포넌트 (feat.공식문서)

Next.js 프로젝트를 드디어 시작했습니다! 

기본 개념들을 익힌 후, 개인 포트폴리오 사이트를 Next.js로 개발해보려고 합니다.

 

우선, 천천히 공식 문서를 뜯어보며 배운 개념들을 정리해보겠습니다. 

 

1. 서버 컴포넌트 vs. 클라이언트 컴포넌트

- Next.js는 서버 사이드 렌더링을 쉽게 해주는 리액트 프레임워크입니다. 

기본적으로 app 파일에 들어있는 컴포넌트들은 서버 단에서 렌더링됩니다. (= 서버 컴포넌트 by default) 그러나, 이벤트 리스너나 상태, 라이프 사이클과 관련된 이펙트들은 클라이언트 단에서 관리해주는 것이 필요합니다. 이렇게 특수하게 클라이언트에서 해야 하는 작업들이 있는 컴포넌트의 경우, 파일 최상단에 "use client" 를 입력해주어 클라이언트 컴포넌트로 관리해야 합니다. 

 

공식 문서에는 친절하게도 언제 클라이언트 컴포넌트로 관리해야 하는지가 잘 나와있습니다.

 

이렇게 함으로써, 클라이언트 사이드 렌더링을 하는 리액트 프로젝트보다 빠른 랜딩 페이지 렌더링과 자바스크립트 번들의 사이즈를 줄이는 효과를 얻을 수 있습니다. 

 

2. 패턴들

공식 문서에서 소개하고 있는 패턴들도 살펴보았습니다. 

 

- 클라이언트 컴포넌트를 컴포넌트 트리 가장 끝쪽에 배치하기

-> 예를 들어, 정적 요소들과 서치바 (interactive) 가 포함된 레이아웃의 경우, 전체 레이아웃은 서버 컴포넌트로 남겨두고, 클라이언트단에서의 관리가 필요한 서치바만 <SearchBar /> 클라이언트 컴포넌트로 옮깁니다.

- 서버, 클라이언트 컴포넌트는 같은 컴포넌트 트리에 합쳐질 수 있습니다.

리액트 엔진은

 1. 서버에서 모든 서버 컴포넌트를 렌더링한다. 

 2. 결과물을 클라이언트에 전송한다.

 3. 클라이언트에서 클라이언트 컴포넌트를 렌더링하고, 렌더링된 서버 컴포넌트 결과물에에 끼워넣는다. 

이 과정을 거쳐 페이지를 렌더링한다

 

(Good to Know - Next.js에서는 더 빠른 첫 페이지 로딩을 위해 렌더링된 서버 컴포넌트 결과물과 클라이언트 컴포넌트 모두 서버에서 HTML로 pre-rendered 된다.)

 

- 서버 컴포넌트를 클라이언트 컴포넌트 내부에 감싸 넣기

• 서버 컴포넌트를 클라이언트 컴포넌트 내부에 import 하는 것은 지원하지 않음. 
• 서버 컴포넌트를 클라이언트 컴포넌트에 props로 전달하는 패턴을 추천함. (children prop)

-> 여기서 해당 클라이언트 컴포넌트는 children이 무엇인지 알 필요가 없으며, 어디에 위치시킬지만 지정해주면 된다. 

- 서버 컴포넌트 내에서는 서버, 클라이언트 컴포넌트를 import 하는 것과 children prop으로 넘겨주는 것 모두 가능하다. 

 

 

이 아래의 공식문서도 쭉 읽어봤는데, Next.js의 핵심은 서버 단에서 처리할 수 있는 건 최대한 미리 서버단으로 보내고, 클라이언트단에서 꼭 처리해야 하는 것들만 클라이언트단에 남겨 프로젝트를 가볍게 만드는 것이라는 생각이 들었다. 나머지는 포트폴리오 사이트에 적용해보면서 더 공부해보자!