🔍 Server and Client Components
리액트18버전 이전까지는 리액트를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 전적으로 클라이언트에 있었다.
NextJS는 HTML을 생성하고 리액트에 의해 hydrated되도록 클라이언트에 전송함으로써 어플리케이션의 pages로 나누고 서버에서 PreRender하는 더 쉬운 방법을 제공했다. 그러나 초기HTML을 인터랙티브하게 만들기 위해서 추가적인 자바스크립트를 필요로 하게 됐다.
하지만 이제부터 서버 컴포넌트 및 클라이언트 컴포넌트를 사용하여 클라이언트 또는 서버에서 리액트를 렌더링할 수 있게 되었다. 즉, 이제부터 컴포넌트 수준에서도 렌더링 환경을 선택할 수 있게 됐다.
🖤 Server Components
NextJS 13버전이상 app디렉토리 안에 있는 모든 컴포넌트들은 기본적으로 React Server Component이다. 따라서, 추가적인 작업 없이 자동적으로 Server Components를 채택할 수 있으며, 이는 뛰어난 성능으로 이어진다.
✔ 장단점
* 장점
1. 개발자가 서버 인프라를 더 잘 활용할 수 있게 된다.
2. 초기 페이지 포드가 빨라지고 클라이언트 측 자바스크립트 번들 사이즈가 줄어든다.
* 단점
HTML안에 자바스크립트를 못넣는다. (useEffect, onClick, useState등 사용 불가)
🖤 Client Components
클라이언트 컴포넌트는 어플리케이션의 클라이언트 측 인터렉티비티를 추가할 수 있게 해준다. Next.js에서는 서버에서 PreRendering되고 클라이언트에서 hydrate된다. 클라이언트 컴포넌트는 넥스트 12이전버전까지의 작동 방식이라 생각할 수 있다.
✔ 장단점
* 장점
html안에 자바스크립트를 원할때 넣어 기능개발 가능
* 단점
쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려질 수 있다.
❗ client component를 로드하려면 hydration과정이 필요해 페이지 로드속도가 더 느려짐
Convention
만약 클라이언트 컴포넌트로써 사용하고 싶다면 파일의 최상단에 'use client'라는 directive를 써주면 된다. 또한, 굳이 app/ 디렉토리에 위치할 필요 없이 클라이언트 컴포넌트는 아무 위치에나 존재할 수 있는데, app/ 디렉토리에 page들과 colocate 시켜도 상관 없다.
🍀 Next13에서는?
큰페이지들은 보통 서버컴포넌트로 만들고 자바스크립트 기능이 필요한 특정 부분은 클라이언트 컴포넌트로 만들어서 넣는게 좋다.
