SSR과 CSR은 둘 다 웹 애플리케이션의 뷰를 렌더링하는 방법입니다.
표시해줄 화면을 어디서, 어떻게 렌더링 하는가? 를 중점으로 보시면 이해하기가 쉽습니다.
SSR(Server Side Rendering) 이란?
CSR(Client Side Rendering) 이란?
SSR과 CSR의 차이점 한눈에 보기
--- | SSR | CSR |
---|---|---|
렌더링 위치 | 서버 | 클라이언트(Browser) |
초기 로딩 | 빠름(서버에서 렌더링) | 느림(자바스크립트 로딩 필요) |
SEO | 용이 | 어려움 |
사용자 경험 | 페이지 이동 시 새로고침 필요 | 페이지 이동 시 새로고침 없음, 부드러움 |
프로젝트 규모 | 대규모 | 소규모 |
데이터 통신 | 서버와 자주 통신 | 서버와 일회성 통신, 이후 클라이언트 간 통신 |
어디에 사용해야 할까?
검색 엔진 최적화(SEO)가 중요한 경우
SSR은 서버 측에서 렌더링되므로, 검색 엔진이 웹 페이지를 쉽게 수집할 수 있습니다. 따라서 SEO가 중요한 경우 SSR을 사용하는 것이 좋습니다.
초기 로딩 시간이 중요한 경우
SSR은 서버 측에서 렌더링되므로, 초기 로딩 시간이 빠릅니다. 따라서 초기 로딩 시간이 중요한 경우 SSR을 사용하는 것이 좋습니다.
네트워크가 느릴 경우
SSR은 서버 측에서 렌더링되므로, 초기 로딩 시간이 빠르고 빈번한 데이터 요청이 없습니다. 따라서 네트워크가 느린 환경에서 SSR을 사용하는 것이 좋습니다.
보안이 중요한 경우
CSR은 클라이언트 측에서 렌더링되므로, 보안에 취약할 수 있습니다. 반면, SSR은 서버 측에서 렌더링되므로, 보안이 중요한 경우 SSR을 사용하는 것이 좋습니다.
컨텐츠 변경이 적은 경우
SSR은 페이지 이동 시 새로고침 없이 컨텐츠를 보여줄 수 있지만, 서버 측에서 렌더링되므로, 컨텐츠 변경이 적은 경우 SSR을 사용하는 것이 좋습니다.
소규모 프로젝트
초기 로딩 시간이 중요하지 않고, 단일 페이지 애플리케이션(SPA)을 개발해야 하는 경우 CSR을 사용하는 것이 좋습니다.
네트워크가 빠른 경우
CSR은 클라이언트 측에서 렌더링되므로, 초기 로딩 시간이 길어질 수 있습니다. 따라서 네트워크가 빠른 환경에서 CSR을 사용하는 것이 좋습니다.
서버의 성능이 좋지 않을 경우
CSR은 클라이언트 측에서 렌더링되므로, 서버의 성능에 큰 영향을 받지 않습니다. 따라서 서버의 성능이 좋지 않은 경우 CSR을 사용하는 것이 좋습니다.
사용자에게 보여줘야 하는 데이터의 양이 많을 경우
CSR은 초기 로딩 시간이 길어질 수 있지만, 페이지 이동 시 새로고침 없이 데이터를 보여줄 수 있습니다. 따라서 사용자에게 보여줘야 하는 데이터의 양이 많은 경우 CSR을 사용하는 것이 좋습니다.
웹 어플리케이션에 사용자와 상호작용 할 것들이 많을 경우
CSR은 페이지 이동 없이 사용자와 상호작용 할 수 있습니다. 따라서 웹 어플리케이션에서 사용자와 상호작용이 많은 경우 CSR을 사용하는 것이 좋습니다.
간단 정리
SSR을 사용할 때는 초기 로딩 시간이 빠르므로, 사용자가 페이지를 빠르게 볼 수 있다는 장점이 있습니다.
하지만, 페이지 이동 시마다 서버에 데이터를 요청해야 하므로,
빈번한 데이터 요청이 있을 경우 네트워크 성능에 영향을 줄 수 있습니다.
SSR을 사용할 때는 적절한 캐싱 기술을 활용하여 성능을 개선하는 것이 좋습니다.
CSR을 사용할 때는 초기 로딩 시간이 길어질 수 있으므로,
사용자가 이를 인식하지 못하도록 스플래시 스크린 등의 UI 요소를 활용하여 사용자 경험을 개선하는 것이 좋습니다.
또한, SEO 등의 다른 측면에서도 CSR을 사용할 때 고려해야 할 점이 있으므로,
상황에 맞는 방식을 선택하여 사용하는 것이 중요합니다.