SSR과 서버 컴포넌트의 차이점

SSR(Server Side Rendering)과 서버 컴포넌트는 웹 애플리케이션의 퍼포먼스를 향상시키는데 공통적인 관심을 가지고 있지만, 구현 방식과 목적에 있어 중요한 차이점이 있습니다. 💭

서버 사이드 렌더링 !== 서버 컴포넌트

목적: 클라이언트 측에서 실행되기 전 서버에서 HTML을 렌더링하고 클라이언트로 전송하는 것입니다. 처음 페이지 로딩 시 성능을 향상시키고, SEO를 개선하는 것이 주된 목적입니다.
활용: 초기 페이지 로드 시 클라이언트에 HTML을 빠르게 전달해 사용자가 콘텐츠를 더 빨리 볼 수 있게 합니다. 또한 이를 통해 검색 엔진이 콘텐츠를 쉽게 파악할 수 있도록 하여 SEO를 강화할 수 있습니다.
프로세스: 모든 페이지는 처음에 서버에서 렌더링되고, 그 후에 클라이언트 측 스크립트가 로드되어 애플리케이션이 "재수화"(re-hydrated)되어 사용자와의 상호작용이 가능해집니다 [1].

목적: 서버 컴포넌트는 주로 클라이언트 사이드의 번들 크기를 줄이고, 서버와 클라이언트 간의 데이터 페칭을 최적화하는 것을 목표로 삼고 있습니다.
특징: 서버 컴포넌트는 서버에서 렌더링을 진행해서 클라이언트로 넘겨줌니다. 자바스크립트 번들에 포함되지 않으므로 Zero 번들 사이즈 이점을 가지고있고 이는 네트워크 사용량 감소 및 시작 시간 단축과 같은 이점을 제공합니다. 자동 코드 스플릿팅을 제공합니다. 리렌더링이 되지 않습니다. 서버 리소스 접근이 가능합니다.
활용: 서버 컴포넌트를 사용하면 클라이언트 사이드에서 처리하고 있었던 데이터 의존적인 연산을 서버로 옮겨 처리하여 클라이언트의 부담을 줄일 수 있습니다.
차별점: 서버 컴포넌트는 클라이언트 번들 크기에 영향을 주지 않으면서 데이터를 서버에서 직접 처리할 수 있도록 해서 클라이언트의 퍼포먼스를 향상시키는 데 집중합니다 [2].

결론적으로, SSR은 전통적으로 서버에서 렌더링하여 초기 페이지 로딩 시간을 단축시키고 SEO를 개선하는 목적으로 사용됩니다. 반면 서버 컴포넌트는 클라이언트의 퍼포먼스를 향상시키기 위해 서버에서만 동작하는 컴포넌트를 개발하고 사용하는 새로운 접근 방식입니다.

[Next JS] SSR과 서버 컴포넌트의 차이점