CSR vs SSR

이철호·2023년 6월 18일

CSR SSR

소개

오늘은 웹 개발에서 중요한 개념인 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)에 대해 자세히 알아보겠습니다.

CSR과 SSR은 웹 애플리케이션의 렌더링 방식을 나타내는 두 가지 접근법입니다.

각각의 특징과 장단점

클라이언트 사이드 렌더링

클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)

클라이언트 사이드 렌더링은 웹 애플리케이션의 렌더링을 클라이언트 측에서 처리하는 방식입니다.
서버로부터 데이터를 받아와 클라이언트(브라우저)에서 동적으로 화면을 렌더링합니다.
JavaScript 기반의 프레임워크나 라이브러리인 React, Angular, Vue.js 등을 사용하여 구현합니다.

CSR의 동작 과정

클라이언트가 서버에 HTML, CSS, JavaScript 파일을 요청합니다.
서버는 정적 파일을 전송하고, 클라이언트에서 JavaScript 파일을 실행합니다.
클라이언트는 필요한 데이터를 서버에 요청하고, 데이터를 비동기적으로 받아옵니다.
클라이언트는 받아온 데이터를 사용하여 동적으로 화면을 구성하고 렌더링합니다.

CSR의 장점

빠른 초기 로딩: 페이지 초기 로딩 시 필요한 최소한의 정적 파일만 전송되기 때문에 초기 로딩 속도가 빠릅니다.
좋은 사용자 경험: 데이터를 비동기적으로 로딩하므로 사용자에게 더 나은 상호작용성과 반응성을 제공할 수 있습니다.
재사용 가능한 로직: 클라이언트 사이드 코드는 API와 분리되어 로직을 재사용하기 쉽습니다.

CSR의 단점

검색 엔진 최적화(SEO)에 제약: 초기 로딩 시에는 서버에서 제공되는 HTML에는 데이터가 없기 때문에 검색 엔진이 페이지를 크롤링할 때 문제가 발생할 수 있습니다.
초기 로딩 속도 지연: 페이지에 필요한 데이터를 받아오기 위해 추가적인 네트워크 요청이 필요하므로 초기 로딩 속도가 느릴 수 있습니다.

서버 사이드 렌더링

서버 사이드 렌더링 (Server-Side Rendering, SSR)

서버 사이드 렌더링은 웹 애플리케이션의 렌더링을 서버 측에서 처리하는 방식입니다.
서버에서 클라이언트에게 완성된 HTML을 전송하여 화면을 구성합니다.
주로 서버 사이드 프레임워크나 템플릿 엔진을 사용하여 구현합니다.

SSR의 동작 과정

클라이언트가 서버에 페이지 요청을 보냅니다.
서버는 요청에 필요한 데이터를 가져와서 완전한 HTML 페이지로 렌더링합니다.
서버는 완성된 HTML을 클라이언트에게 전송합니다.
클라이언트는 전송받은 HTML을 렌더링하여 사용자에게 보여줍니다.

SSR의 장점

검색 엔진 최적화(SEO): 완전한 HTML이 서버로부터 전송되므로 검색 엔진이 콘텐츠를 수집하기 용이합니다.
초기 로딩 속도 향상: 서버로부터 완전한 HTML을 받기 때문에 초기 로딩 속도가 빠릅니다.

SSR의 단점

서버 부하: 서버에서 모든 페이지의 렌더링을 처리해야 하므로 서버 부하가 증가할 수 있습니다.
제한된 상호작용성: 페이지가 서버에서 렌더링되므로 클라이언트에서 추가적인 데이터 로딩이나 동적인 UI 업데이트에 대한 네트워크 요청이 필요합니다.
초기 로딩 성능 향상이 있더라도 사용자 경험의 총체적인 성능 향상에는 한계가 있을 수 있습니다.

결론

CSR과 SSR은 각각의 장단점을 가지고 있으며, 프로젝트의 요구사항에 따라 선택되어야 합니다.
SSR은 초기 로딩 속도와 검색 엔진 최적화가 중요한 경우에 적합하며, CSR은 상호작용성과 동적인 UI 업데이트가 더 필요한 경우에 유용합니다. 최근에는 둘을 조합하여 Hybrid Rendering이나 Incremental Static Regeneration과 같은 방법들이 등장하여 두 가지 방식의 장점을 결합한 개발 방법도 사용되고 있습니다.

이상으로 CSR과 SSR에 대한 설명을 마치겠습니다. 감사합니다!