Rendering

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

서버 사이드 렌더링 - SSR

• 전통적인 웹 어플리케이션은 서버 사이드 렌더링 방식이다.
• 요청시마다 서버에서 처리한 후, 새로고침으로 페이지에 대한 응답이 온다.
• 웹에서 많은 정보와 기능이 많아지면서 SPA(싱글 페이지 렌더링) 개념이 생겼다.

클라이언트 사이드 렌더링 - CSR

• 클라이언트에서 자바스크립트를 통해 렌더링하는 방식이다.
• SPA : Single Page Application
• 브라우저에서 로드되고 난 뒤에, 페이지 전체를 서버에 요청하는 것이 아니라 최초 한번 페이지를 불러오고 클라이언트의 요청에 따라 해당 페이지의 특정부분만 렌더링하는 개념이다.
• HTML5 History에 의해 렌더링되기 때문에, 언제 새로운 데이터를 불러올지 스스로 정해서 구현해야 한다.

SSR V.S. CSR

• CSR(Client Side Rendering) 👉 HTML, JS, CSS 등의 리소스를 모두 불러오고 JS가 실행되면서 렌더링하기에 SSR보다 늦게 화면이 뜬다. 대신, 최초 로딩이후 요청에 대해서는 인터렉션이 빠르다.
• 검색엔진 최적화 문제 : 일반적인 웹 크롤러, 봇들은 HTML 내용만 수집하기 대문에 JS가 실행되어 렌더링하기 전까지 HTML은 빈화면이다.
• SSR에서는 사용자 정보를 서버측에서 세션으로 관리했으나, CSR일 경우 쿠키에 저장하여 보안에 문제가 있을 수 있다.

참고자료

서버 사이드 렌더링이란? : linked2ev