SSR과 CSR

SSR (Server Side Rendering)

서버쪽에서 렌더링해서 클라이언트로 전달하는 방식

SSR 방식으로 웹페이지가 화면에 보여지는 방식

1.서버가 렌더가 준비된 HTML을 보내준다 (이미 렌더링 되어서 옴)

2.사용자는 화면을 볼수가 있음 이후 자바스크립트 다운 (Viewable)

3.자바스크립트 실행

4.Interactive

자바스크립트가 다운되는 되기 전에 이미 사용자가 Viewable하다는 것!

CSR (Client Side Rendering)

브라우저에서 렌더링하는 방식

1.서버가 브라우저한테 HTML을 줄때 안에 내용이없음 -> user는 아무것도 볼수가 없음

2.자바스크립트를 다운 받음

3.자바스크립트를 실행시키면 그제서야 내용이 만들어짐

4.이제 사용자들이 Viewable

사용자는 자바스크립트가 모두 다운로드 되고 실행이 되고나서야 Viewable!

SEO 검색엔진 최적화와의 연관

HTML 안에 내용이 있냐, 없냐가 핵심!

SSR은 View를 서버에서 전부 렌더링하여 보내주기 때문에 HTML에 모든 컨텐츠가 저장되어 있어서 검색엔진 봇에게 내용을 제공할수 있고 검색엔진에 노출시켜줄 수 있다.

CSR방식으로 이루어진 사이트는 View를 생성하는데 자바스크립트가 필요하다. 그 전까지는 HTML의 내용은 비어있기 때문에 웹 크롤러들은 내용을 알 수 없고 제대로된 데이터를 수집할 수 없게 된다.(구글은 자바스크립트를 해석해서 크롤링 해준다고 한다.)

렌더링 속도

초기 렌더링시 SSR은 필요한 HTML과 스크립트 파일만 가져오므로 속도가 빨라서 사용자는 금방 페이지를 볼 수 있지만, CSR은 HTML, CSS, JS를 한 번에 불러오기 때문에 사용자가 페이지를 보려면 상대적으로 오래걸린다.