CSR & SSR

브라우저 렌더링

브라우저 렌더링이란 서버에서 HTML, CSS 및 Javascript와 같은 웹 페이지 자원을 전달받아 브라우저 화면에 표시해주는 프로세스를 의미한다.
일반적으로 브라우저는 먼저 HTML과 CSS를 받아들이고 해석하여 DOM과 CSSOM을 생성한다. 이후 JavaScript 파일이 로드되면, JavaScript는 DOM을 수정하여 동적으로 콘텐츠를 변경하고 추가할 수 있다.
브라우저는 이러한 프로세스를 통해 최종적으로 사용자에게 시각적으로 표현되는 화면을 생성한다.

그리고 이러한 브라우저 렌더링은 '클라이언트 사이드 렌더링'과 '서버 사이드 렌더링' 방식으로 나누어진다.

CSR & SSR

SPA의 등장

SPA이란 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요천하는 것이 아닌 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 웹 어플리케이션.

전통적인 웹 방식(SSR)은 이 SPA 방식에 비해 성능문제 이슈가 있었다. 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하는 방식이였기 때문이다.

SPA는 트래픽을 감소시키고 더 나은 경험을 제공한다. 서버는 JSON 파일만 제공하고, HTML을 을 그리는 역할은 Javascript를 통해 클라리언트 측에서 수행한다.

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

1.장점

• 트래픽 감소
  -view 렌더링을 브라우저에 담당시켜 서버 트래픽을 감소시키고, 다 빠른 인터렉션을 제공해준다.
  
  
• 새로 고침 발생 x
  -네이티브 앱과 같은 경험을 할 수 있다.

2.단점

• 초기 페이지 로딩 속도가 느림
  -CSR에서는 초기 페이지 로딩 시 클라이언트 측에서 HTML, CSS, JavaScript 등의 자원을 다운로드한 후, JavaScript를 이용해 DOM을 구성하고 데이터를 불러와 화면에 렌더링하는 방식을 사용한다. 이로 인해 초기 페이지 로딩 속도가 느릴 수 있다.
  
  
• 검색엔진 최적화(SEO) 문제 발생
  -포털사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 수집하지 못하는 경우가 생긴다. 구글의 검색엔진은 자바스크립트 엔진이 내장되어있기 때문에 크롤링이 되지만, 네이버,다음의 경우는 검색엔진이 제대로 크롤링을 하지 못하기 때문에 별도의 보완작업이 필요하다.
  
  
• 접근성이 떨어짐
  -초기 로딩 후에 동적인 페이지를 구성하게 되므로, 접근성 문제가 발생 할 수 있다.

서버 사이드 렌더링(SSR)?

1.장점

• 초기 페이지 로딩 속도가 빠름
  -찻 페이지 로딩 시 서버 측에서 해당하는 문서만 전달하여 렌더링 하기 때문에 초기 로딩 속도가 빠르다. 렌더링 작업이 완료되기 전에 사용자가 컨텐츠를 이용할 수 있다.
  
  
• 검색엔진 최적화(SEO) 용이
  
  
• 접근성이 좋다

2.단점

• Blinking Issue
  -사용자가 새로고침을 할 경우 전체 웹사이트를 다시 서버에서 받아와야 하기 때문에 화면이 없어졌다가 나타나는 현상이 생겨 UX관점으로 볼때 좋지 않다.
  
  
• 서버 과부하
  -사용자가 많은 제품일수록 서버에 데이터를 재요청하는 횟수가 많아져 과부하 우려
  
  
• 성능 악화 가능성
  -세로운 요청이 생길때마다 바뀌지 않아도 되는 부분도 렌더링이된다.
  
  
• 사용자 경험
  -페이지 로드가 너무 무겁다면, 오히리 사용자 경험을 개선하는게 아니라 해칠 수 있다. 초기 페이지 로드시 데이터가 많이 필요한 대시 보드가 예가 될 수 있다.
  
  
• TTV와 TVI의 공백시간
  -SSR 방식은 HTML을 먼져 가져와서 웹사이트를 볼 수 있지만 자바스크립트를 아직 받아 오기 전으로 사용자가 클릭을 해도 아무런 작동을 할 수 없는 상태가 된다. 그래서 사용자가 사이트를 볼 수 있는 시간(TTV)과 실제로 인터랙션이 가능한 시간(TVI)의 공백 시간이 꽤 길다는 단점이 있다.

사용 권장 예시

CSR 사용

• 네트워크가 빠를 때
• 서버의 성능이 좋지 않을 때
• 사용자에게 보여줘야 하는 데이터의 양이 많을 때 (로딩창을 띄울 수 있는 장점이 있다.)
• 메인 스크립트가 가벼울 때
• SEO에 큰 필요성을 못 느낄 때
• 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때 (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)

SSR 사용

• 네트워크가 느릴 때 (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
• SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때
• 최초 로딩이 빨라야하는 사이트를 개발 할 때
• 메인 스크립트가 크고 로딩이 매우 느릴 때 CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다.
  하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
• 웹 사이트가 상호작용이 별로 없을 때.