SSR vs CSR.md

서버사이드 렌더링 (SSR) vs 클라이언트사이드 렌더링 (CSR)

렌더링이란?

• 요청해서 받은 내용을 브라우저 화면에 표시하는 것
• 렌더링의 과정
  1. Loader 가 서버로 부터 정보들을 불러옴
  2. 파싱을 통해 문서를 DOM 트리로 만든다.
  3. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
  4. CSS 설정/레이아웃 위치 지정
  5. 렌더링 트리가 그려짐

서버사이드 렌더링 (SSR)

• 전통적인 웹 방식이다.

• 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하며, 브라우저는 HTML을 표시하는 방식이다.

• 이 후에는 일부 HTML과 Script만 브라우저로 전달하고, 브라우저에서 Script를 실행시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식을 사용하게 되었다.

• CSR에 비해 성능문제 이슈가 있다.

  • 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하는 방식

    (사용자와 인터렉션이 많은 웹앱에는 적절하지 못한 방법, 불필요한 트래픽과 서버 자원 사용이 생기기 때문)

클라이언트사이드 렌더링 (CSR)

• SPA (Single Page Application) 은 CSR방식이다.

• SPA는 페이지 로드가 없고, 모든 페이지는 단순히 HTML5 History에 의해 렌더링 되기 때문에 언제 새로운 데이터를 불러와야할지 스스로 정해서 구현 해야한다.

• 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에, SSR보다 빠른 인터렉션을 기대할 수 있다.

• 서버는 JSON파일만 보내주고, HTML을 그리는 역할은 JavaScript를 통해 클라이언트 측에서 수행한다.

• 화면단은 클라이언트가 로드하고, 서버에서는 정말 필요한 데이터만 전달받아 보여주는 방식

• SSR보다 트래픽을 감소시키고, 사용자에게 더 나은 결과물을 제공할 수 있다.

  SPA는 한 종류의 화면만 존재하는 것이 아니다.

  화면에 따라 다른 주소를 가진다. 주소가 있어야 사용자들이 북마크 등의 기능을 사용하고 서비스에 구글을 통해 유입이 될 수 있기 때문이다. (SEO)

  주소에 따라 다른 뷰를 렌더링하는 것을 라우팅 이라고 한다. React자체에 이 기능이 내장되어있지 않기 때문에 react-router 를 import 하여 설정해야한다.

• 즉 필요한 부분만 리로딩 없이 서버로 부터 받아 화면을 갱신한다.

SSR / CSR 의 장단점

• SSR
  • 장점
    • 검색엔진 최적화 (SEO) 가능 : SSR을 통해 얻을 수 있는 가장 큰 이점
    • 성능 개선 : 첫 렌더링된 html을 클라이언트에게 전달해주기 때문에 초기로딩속도를 줄여줄 수 있다.
  • 단점
    • 프로젝트의 복잡도
    • 페이지 이동시 화면이 깜빡거린다.
    • 부하발생
• CSR
  • 장점
    • 트래픽 감소 : 필요한, 변경된 데이터만 받아서 그림
    • 사용자 경험 : 새로고침이 발생하지 않아, 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.
  • 단점
    • 초기 구동속도가 느리다.
    • 검색엔진 : 자바스크립트 엔진이 동작하지 않으면 원하는 정보를 표시해주지 못한다.

참고블로그

• SSR vs CSR - 1
• SSR vs CSR - 2