[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트

리액트 서버 컴포넌트 리액트 18에서 도입된 리액트 서버 컴포넌트는 서버 사이드 렌더링과는 완전히 다른 개념이다. 둘다 '서버'라는 단어가 들어있는데 어떤게 다른 것인지 알아보자! 리액트의 컴포넌트라는 개념에 대해 한번 더 생각해보자. 리액트의 모든 컴포넌트는 클라이언트에서 작동하며, 브라우저에서 JS 코드 처리가 이루어진다. 웹사이트를 방문하면 리액트 실행항 코드를 다운로드하고 리액트 컴포넌트 트리를 만든 후 DOM에 렌더링한다. 서버 사이드 렌더링의 경우 서버에서 DOM을 만들어오고, 클라이언트에서 만들어진 DOM을 기준으로 하이드레이션을 진행한다. 이런 구조는 지금까지 Next.js,리액트에서 제공하는 서버사이드 렌더링 흐름이었다. 해당 구조의 한계점은 무엇일까? 1. JS번들크기가 0인 컴포넌트를..