SSR이란?

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. (render가 준비된 html을 보내준다/2단계에서 이미 보여줄 준비가 끝난 것을 의미한다.)

Browser rendering과 Server Side rendering

1. Browser rendering에서의 rendering 단어와 의미
   브라우저라는 프로그램이 서버로부터 html파일, css파일, 자바스크립트 파일을 받아온 다음, 그것을 해석하고 파싱해서 그 결과물로 화면을 그리는 과정을 렌더링이라고 한다.
2. Server Side Rendering에서의 rendering 단어와 의미
   html 파일을 누가 어디서 주고 있는지. html 파일 안에 이미 내용들이 있는 채로 주고 있느냐에 대한 의미이다. SSR의 렌더링은 html 파일 안에 내용이 있느냐 없느냐이다. 있으면 렌더링이 된 것이다.

서버사이드 렌더링의 과정

1단계 렌더 될 준비가 되어 있는 html 파일을 서버에서 준다. html파일을 서버에서 주는데 이 html 파일은 내용이 있다. (렌더될 준비가 완벽히 되어있는 것)
2단계 렌더 될 준비가 완벽히 끝난 html파일이기 때문에 유저는 바로 볼 수 있다. 그리고 나서 브라우저는 자바스크립트 파일을 다운로드 받는다. 보여지는 것은 2단계부터 가능하고, 이것이 CSR과 가장 큰 차이점이다. preivew에서 확인이 가능하다.
3단계 다운로드 받은 js 파일을 브라우저가 실행을 시킨다.
4단계 상호작용이 가능해진다.

CSR

클라이언트사이드 렌더링의 과정

서버사이드렌더링과 다르게 4단계에서 볼 수 있고, 상호작용가능하다.

📍 왜 그럴까?

서버가 브라우저에게 html 파일을 주긴 주는데 html 파일이 아무내용이 없는 render가 준비된 파일이 아니다.
자바스크립트 파일을 받아서 자바스크립트 파일에서 create element function으로 document.createElement() tag를 만들어 태그가 렌더링 되면 자바스크립트 파일이 실행시켜야 최종단계에서 보여질 수 있는 것이다.

(main.chunk.js 을 다운로드 받고 있음 → App 이라는 함수를 실행시킨다.)

SSR VS CSR

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.

검색엔진 최적화 SEO

검색엔진 최적화: 검색을 하면 그 해당 내용을 노출을 시켜주는데 검색엔진 봇이 그 내용을 확인 할 수 있어야 한다.
CSR은 브라우저가 자바스크립트를 실행시켜야 내용을 확인할 수 있기 때문에 노출시킬 수 없으나 SSR은 이미 서버에서 내용을 주고 있기 때문에 서버사이드 렌더링을 통해 검색엔진 봇에 노출시켜 최적화를 하며 SEO 문제를 해결시킬 수 있다.

참고
https://d2.naver.com/helloworld/7804182
https://www.youtube.com/watch?v=D71ByEIBWEs&t=295s