[네트워크] SSR, CSR

[SSR(Server Side Rending)]

: 서버에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 (예시. 가구 조립을 마친 후 소비자에게 전달)

- JS가 브라우저에 렌더링 하는 대신 서버에서 렌더링 진행

- 브라우저가 서버에 URI로 Get 요청을 보내면 서버는 웹 페이지 파일을 전송

- 서버의 웹 페이지가 브라우저에 도착 시 완전히 렌더링 됨

 

[CSR(Client Side Rendering)]

: 서버에서가 아닌 클라이언트 쪽에서 렌더링이 진행 (예시. 가구 부품을 받은 후 소비자가 조립 진행)

- 클라이언트에서 JS 페이지를 렌더링

- CDN(물리적으로 가까운 서버에서 요청에 응답하는 방식)이 THML 파일과 JS로 접근 가능한 링크를 클라이언트에 전송

- 웹 페이지와 함께 전달된 JS 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 변경

- DB에 저장된 데이터를 가져와 웹 페이지 렌더링을 위해 API 요청

- 서버가 API에 응답 및 데이터를 placeholder 자리에 넣어줌으로서 상호작용 가능

 

	SSR	CSR
차이점 : 렌더링 위치	서버에서 페이지를 런더링	브라우즈에서 페이지를 렌더링
사용	- SEO(Search Engine Optimization)이 우선순위인 경우 사용 - 첫 화면 렌더링이 빠르게 필요한 경우 - 사용자와 상호작용이 적은 경우	- SEO가 우선순위가 아닌 경우 사용 - 사이트와 풍부한 상호작용이 있는 경우 - 웹 애플리케이션을 제작하는 경우
위험(Risk)	- 자원 이용이 서버에 집중되기에 유지비용이 높음 - 서드파티 JS 라이브러리의 경우 서버 사이드 렌더링이 불가능할 수 있음	- 느린 렌더링 속도로 사용자 경험이 안좋아 질 수 있음 - Search engine bots와 상성이 좋지 않아 JS가 렌더링해야 하는 정보들은 search engine index에 포함되지 않을 수 있음