SSR과 CSR의 차이점

juny_0429·2023년 5월 9일
0
SSR과 CSR은 둘 다 웹 애플리케이션의 뷰를 렌더링하는 방법입니다.
표시해줄 화면을 어디서, 어떻게 렌더링 하는가? 를 중점으로 보시면 이해하기가 쉽습니다.

SSR(Server Side Rendering) 이란?

SSR은 서버 사이드 렌더링으로 서버에서 페이지를 생성하고 HTML, CSS 및 JavaScript를 브라우저에 전송합니다.

브라우저는 이를 받아 렌더링하고 사용자에게 보여줍니다.


  • 장점
    1. 검색 엔진 최적화(SEO)가 용이
    2. 초기 페이지 로드 속도가 빠름
    3. 브라우저가 JavaScript를 지원하지 않는 경우에도 콘텐츠가 표시
    4. 서버에서 데이터를 미리 불러올 수 있어 사용자 경험을 개선할 수 있음

  • 단점
    1. 서버 자원을 많이 사용
    2. SPA(Single Page Application)에서 일부 기능을 구현하기 어려움
    3. 페이지가 매번 새로고침되어 매번 서버 요청이 발생하기 때문에 서버 측의 부담이 큼

CSR(Client Side Rendering) 이란?

CSR은 클라이언트 사이드 렌더링으로 브라우저에서 JavaScript를 사용하여 애플리케이션을 실행하고 데이터를 가져와 뷰를 렌더링합니다.


  • 장점
    1. 애플리케이션 로딩 후에는 빠른 전환 및 부드러운 애니메이션 등 좋은 사용자 경험을 제공
    2. 서버 측 자원을 적게 사용
    3. SPA에서 일부 기능을 쉽게 구현

  • 단점
    1. 초기 페이지 로딩 속도가 느리고, 검색 엔진 최적화(SEO)에 불리
    2. JavaScript를 비활성화 한 경우에는 콘텐츠를 볼 수 없음
    3. 브라우저에서 JavaScript를 실행하므로 보안상의 위협이 될 수 있음

SSR과 CSR의 차이점 한눈에 보기

---SSRCSR
렌더링 위치서버클라이언트(Browser)
초기 로딩빠름(서버에서 렌더링)느림(자바스크립트 로딩 필요)
SEO용이어려움
사용자 경험페이지 이동 시 새로고침 필요페이지 이동 시 새로고침 없음, 부드러움
프로젝트 규모대규모소규모
데이터 통신서버와 자주 통신서버와 일회성 통신, 이후 클라이언트 간 통신

어디에 사용해야 할까?

SSR 사용 예시

  • 검색 엔진 최적화(SEO)가 중요한 경우
    SSR은 서버 측에서 렌더링되므로, 검색 엔진이 웹 페이지를 쉽게 수집할 수 있습니다. 따라서 SEO가 중요한 경우 SSR을 사용하는 것이 좋습니다.

  • 초기 로딩 시간이 중요한 경우
    SSR은 서버 측에서 렌더링되므로, 초기 로딩 시간이 빠릅니다. 따라서 초기 로딩 시간이 중요한 경우 SSR을 사용하는 것이 좋습니다.

  • 네트워크가 느릴 경우
    SSR은 서버 측에서 렌더링되므로, 초기 로딩 시간이 빠르고 빈번한 데이터 요청이 없습니다. 따라서 네트워크가 느린 환경에서 SSR을 사용하는 것이 좋습니다.

  • 보안이 중요한 경우
    CSR은 클라이언트 측에서 렌더링되므로, 보안에 취약할 수 있습니다. 반면, SSR은 서버 측에서 렌더링되므로, 보안이 중요한 경우 SSR을 사용하는 것이 좋습니다.

  • 컨텐츠 변경이 적은 경우
    SSR은 페이지 이동 시 새로고침 없이 컨텐츠를 보여줄 수 있지만, 서버 측에서 렌더링되므로, 컨텐츠 변경이 적은 경우 SSR을 사용하는 것이 좋습니다.

CSR 사용 예시

  • 소규모 프로젝트
    초기 로딩 시간이 중요하지 않고, 단일 페이지 애플리케이션(SPA)을 개발해야 하는 경우 CSR을 사용하는 것이 좋습니다.

  • 네트워크가 빠른 경우
    CSR은 클라이언트 측에서 렌더링되므로, 초기 로딩 시간이 길어질 수 있습니다. 따라서 네트워크가 빠른 환경에서 CSR을 사용하는 것이 좋습니다.

  • 서버의 성능이 좋지 않을 경우
    CSR은 클라이언트 측에서 렌더링되므로, 서버의 성능에 큰 영향을 받지 않습니다. 따라서 서버의 성능이 좋지 않은 경우 CSR을 사용하는 것이 좋습니다.

  • 사용자에게 보여줘야 하는 데이터의 양이 많을 경우
    CSR은 초기 로딩 시간이 길어질 수 있지만, 페이지 이동 시 새로고침 없이 데이터를 보여줄 수 있습니다. 따라서 사용자에게 보여줘야 하는 데이터의 양이 많은 경우 CSR을 사용하는 것이 좋습니다.

  • 웹 어플리케이션에 사용자와 상호작용 할 것들이 많을 경우
    CSR은 페이지 이동 없이 사용자와 상호작용 할 수 있습니다. 따라서 웹 어플리케이션에서 사용자와 상호작용이 많은 경우 CSR을 사용하는 것이 좋습니다.


간단 정리

SSR을 사용할 때는 초기 로딩 시간이 빠르므로, 사용자가 페이지를 빠르게 볼 수 있다는 장점이 있습니다.
하지만, 페이지 이동 시마다 서버에 데이터를 요청해야 하므로,
빈번한 데이터 요청이 있을 경우 네트워크 성능에 영향을 줄 수 있습니다.
SSR을 사용할 때는 적절한 캐싱 기술을 활용하여 성능을 개선하는 것이 좋습니다.

CSR을 사용할 때는 초기 로딩 시간이 길어질 수 있으므로,
사용자가 이를 인식하지 못하도록 스플래시 스크린 등의 UI 요소를 활용하여 사용자 경험을 개선하는 것이 좋습니다.
또한, SEO 등의 다른 측면에서도 CSR을 사용할 때 고려해야 할 점이 있으므로,
상황에 맞는 방식을 선택하여 사용하는 것이 중요합니다.

0개의 댓글