서버 컴포넌트는 서버사이드 렌더링과 어떻게 다른 것인가?
서버 컴포넌트는 컴포넌트를 서버에서 그려줄 뿐 아니라, 클라이언트에 전송되는 자바스크립트 코드를 줄여준다.
반면 SSR에 사용되는 컴포넌트 코드는 클라이언트에도 전송된다. 요청 시 이것을 전달하여 서버에서 그려받아온 다음 hydrate시키는 것이므로..
Next.js의 /app 디렉터리 안에 있는 것은 기본적으로 모두 서버 컴포넌트이다.
서버 컴포넌트는, 서버사이드 렌더링되는 클라이언트 컴포넌트와는 다르게, '서버 자산'에 접근이 가능하다!
예를 들어 서버에 존재하는 상품 카테고리와 관련된 enum이 존재하고, 이와 동일한 데이터를 사용하여 클라이언트에서 렌더링이 필요한 경우 enum을 복사해와서 클라이언트 프로젝트에 넣어둔 후 (또는 SSR과 관련된 콜백에서 fetch 후) 해당 데이터로 렌더링을 하는 코드를 작성했다면,
서버 컴포넌트를 사용한다면 해당 컴포넌트 안에서 서버의 asset을 바로 import 해서 렌더링에 사용하는 코드를 작성할 수 있는 것이다. 이후 렌더링 된 HTML(에 가까운) 정보를 클라이언트에서 hydration 하기 때문에 클라이언트에서는 서버에서 이용한 asset만큼의 dependency를 줄여 코드를 작성할 수 있다.
그러므로 서버 컴포넌트를 활용하면 '번들 사이즈가 줄어든다'.
왜 그럴까? 생각해보자.
번들링은 빌드 시점에 이루어지는데 이 때 컴포넌트와 관련된 dependency들이 컴포넌트와 관련된 하나의 코드로 묶인다(번들링된다). 이렇게 번들링 된 자바스크립트 파일이 HTML에서 사용될 수 있도록 전송되어 렌더링이 이루어지게 된다.
그러나 서버 컴포넌트는 그림(렌더링)에 필요한 도구를 묶어서 보내고 브라우저에서 그리는 것이 아니라(=클라이언트 사이드 렌더링), 이미 서버에 있는 도구들을 사용해서 그린 그림만을 보내기 때문에 번들링의 사이즈가 줄어들 수 있게 되는 것!
