[TIL] SSR(서버 사이드 렌더링)

SSR 이란 ?
Server Side Rendering은 서버에서 모든 데이터를 작성하여 클라이언트로 전송, 클라이언트는 해당 데이터를 해석해 웹사이트를 표시하는 방법의 웹 통신 방법 이라고 정의할 수 있다.
대척점에 있다고 볼 수 있는 CSR(클라이언트 사이드 렌더링) 보다 더 오래된 기술이며 AJAX가 뜨기 이전에 동적으로 웹페이지를 생성할 수 있는 기술이었으며, 서버 사이드 스크립트 라고 불리는 언어들이 SSR을 위해 사용된 것이다.

장점

• 초기 페이지 로드 시간이 빠르다.
• SEO(검색 엔진 최적화)를 쉽게 구성할 수 있다.
  

단점

• TTFB(Time to First Byte)가 느리다.
• 사용자 경험이 떨어진다.
  • 데이터가 너무 많은 경우
  • blinking 이슈
• 서버에 과부하가 걸릴 수 있다.
• TTV(Time To View)와 TTI(Time to Interactive)의 간격이 발생할 수 있다.
  
  

CSR 이란 ?
Client Side Rendering은 클라이언트인 브라우저가 렌더링을 처리하는 방식이다.

장점

• 사용자 경험이 향상된다.
• 서버 트래픽을 줄일 수 있다.
• 변경이 필요한 내용만 서버로부터 받기때문에 초기 로딩 이후의 속도가 빠르다.

단점

• 초기 페이지 로드 시간이느리다.
• SEO를 위한 추가적은 보완 작업이 필요하다.

SSR vs CSR

렌더링은 브라우저에서 서버로부터 받은 파일(html, css, js)을 파싱해서 화면을 그리는 것을 의미한다.

따라서 렌더링을 하는 주체가 클라이언트 사이드인지, 서버 사이드인지에 따라 구분된다.

• SSR: 렌더링을 하는 주체가 서버이기 때문에, 서버에서 html 파일을 받았을 때 바로 화면을 그릴 수 있다.
  • 서버에서 전부 렌더링 하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 검색 키워드 수집에 용이하다.

• CSR: 렌더링을 하는 주체가 클라이언트이기 때문에, 서버에서 html 파일을 받아도 아무것도 볼 수 없다.
  • 대부분 검색엔진의 크롤러, 봇들은 자바스크립트를 실행시키지 못하고 HTML에서만 컨텐츠를 수집하기 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식한다.
    
    

동작 순서
SSR

1. 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한다.
2. 컴파일된 HTML은 추가 렌더링 및 표시를 위해 클라이언트 브라우저로 전송된다(response).
3. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 렌더링 한다.
4. 브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형(interactive)으로 만든다.
5. 사용자가 페이지를 이동할 경우, 위 동작을 반복한다.

CSR

1. 사용자가 웹 페이지를 방문하면(request), 브라우저는 최소한의 HTML 파일을 다운로드(response) 한다. 이 HTML 파일은 script, meta, link 등의 태그를 포함하며, 빈 컨텐츠의 index.html 파일이라고 보면 된다.
2. 브라우저는 index.html에 있는 자바스크립트 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링한다.
3. 사용자가 페이지를 이동할 경우, 서버에 추가 HTML파일을 요청하지 않고 이미 받은 자바스크립트를 이용하여 렌더링 한다.

참고

• TTV(Time To View): 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
• TTI(Time To Interactive): 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점
• TTFB(Time to First Byte): HTTP 요청을 했을때 처음 byte (정보) 가 브라우저에 도달하는 시점