React Server Components란 무엇이며, 기존 SSR과의 차이점은?

React Server Components는 서버에서 렌더링되는 컴포넌트입니다. 기존 SSR(Server-Side Rendering)과 가장 큰 차이점은 렌더링 위치와 번들 사이즈입니다.

SSR은 서버에서 HTML을 생성하여 클라이언트로 보내고, 클라이언트에서는 JavaScript를 통해 DOM을 조작하는 hydration 과정을 거칩니다. 이 과정에서 클라이언트는 서버에서 보낸 HTML과 함께 모든 컴포넌트의 JavaScript 번들을 다운로드해야 합니다.

반면, Server Components는 서버에서 렌더링된 결과만 클라이언트로 보내고, 클라이언트에서는 필요한 부분만 hydration합니다. 즉, 서버에서 실행되는 컴포넌트는 클라이언트 번들에 포함되지 않아 번들 사이즈를 크게 줄일 수 있습니다. 또한, Server Components는 데이터 페칭을 서버에서 직접 수행할 수 있어 클라이언트 측 로직을 단순화하고 성능을 향상시킬 수 있습니다.

간단히 말해, Server Components는 렌더링 위치를 서버로 옮겨 번들 사이즈를 줄이고, 클라이언트 컴포넌트와 함께 사용하여 효율적인 렌더링을 가능하게 하는 새로운 방식입니다.