[251024금] 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점은 무엇인가요?

서버 사이드 렌더링(SSR) 

- 서버 측에서 렌더링하는 방식

- 클라이언트가 서버에 컨텐츠 요청 > 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입 > CSS까지 모두 적용해 준비를 마친 HTML과 JS코드를 응답 > 브라우저는 JS코드를 다운 > HTML에 JS 연결

- 모든 데이터가 이미 HTML에 담긴 채로 브라우저로 전달되기에 SEO(검색 엔진 최적화)에 유리하다

- 이미 렌더링된 HTML을 볼 수 있으므로, JS다운로드를 기다려야 하는 CSR에 비해 초기 구동 속도가 빠르다. 

 

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

- 클라이언트 측에서 렌더링하는 방식

- 클라이언트가 서버에 컨텐츠 요청 > 서버는 빈 뼈대만 있는 HTML 응답 > 클라이언트는 연결된 JS링크를 통해 서버로부터 다시 JS파일 다운로드 > JS를 통대 동적 페이지를 만들어 브라우저에 보여줌

- 빈 뼈대만 있기에 웹 크롤러 봇 입장에서 색인할만한 데이터가 없어 SEO에 불리

- 브라우저가 JS파일 다운로드, 동적으로 DOM생성하는 과정에서 초기 로딩 속도가 느림

- 초기 로딩 이후 페이지 일부를 변경할때에는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도가 빠르다. 

- 서버 측의 부하가 적다. 

- 클라이언트 측에서 연산과 라우팅 등을 직접 처리하기 대문에 반응속도가 빠르고 UX도 우수하다