[0925] CS 지식 - 웹(SSR / CRS)

#SSR과 CRS

- SSR이란?

  ▪ SSR(Server Side Rendering)은 자바스크립트가 서버에서 랜더링 하는 것을 말한다.

  ▪ 클라이언트는 브라우저에서 이미 서버에서 렌더링된 화면을 보게 된다.

  ▪ 웹 페이지에서 새로운 데이터가 필요한 경우, 서버는 요청된 데이터를 포함한 페이지를 랜더링한 뒤에 브라우저로 응답.

  ▪ 웹 페이지의 다른 경로로 이동시, 서버는 랜더링 작업 다시 수행.

 

- CSR이란?

  ▪ CSR(Client Side Rendering)은 자바스크립트가 브라우저에서 랜더링 하는 것을 말한다.

  ▪ 클라이언트는 서버에서 렌더링 될 파일을 받아 브라우저에서 랜더링한다.

  ▪ 웹 페이지에서 새로운 데이터가 필요한 경우, 필요한 데이터를 서버에 API요청하여 받아와 브라우저에서 랜더링.

  ▪ 웹 페이지의 다른 경로 이동시, 요청한 경로에 따라 브라우저는 이전 파일에 받은 페이지 파일을 재랜더링.

 

- SSR과 CSR의 차이점

 ▪ SSR과 CSR의 차이점은 페이지의 랜더링 위치이다.

 ▪ SSR은 서버에서 랜더링, CSR은 브라우저에서 랜더링 한다.

 

- SSR 사용, 리스크

 ▪ 다음과 같은 경우 SSR을 사용하는 것이 유리

1.  SEO(Search engine optimization, 검색엔진 최적화, 검색엔진에서 찾기 쉽게)가 우선순위일 경우.
2.  웹 페이지 첫 화면 로딩이 빨라야 하는 경우
3.  웹 페이지가 사용자와 상호작용이 적은 경우

 ▪ SSR의 리크스

1. 서버의 부하가 높음. 애플리케이션 유지비용 상승
2. 일부 서드파티 자바스크립트 라이브러리(제3자가 미리 작성한 코드)의 경우 SSR 사용 불가능

 

- CSR 사용, 리스크

  ▪ 다음과 같은 경우 CSR을 사용하는 것이 유리

1.  SEO가 우선순위가 아닌 경우.
2.  웹 애플리케이션(동적 페이지)의 경우
3.  웹 페이지가 사용자와 상호작용이 다량인 경우

 ▪ CSR의 리크스

1. 클라이언트의 부하 높음. 사용자에 따라 렌더링 속도 저하
2. SEO의 하락.