[Web] SSR / CSR

SSR(Server Side Rendering)

 

 SSR은 JavaScript가 웹 페이지를 브라우저에서 렌더링 하는 대신에, 서버에서 렌더링 한다.

 

 브라우저가 서버의 URI로 GET 요청을 보내면 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링 된다.

 

 만약 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환하여 브라우저에 응답으로 보낸다.

 

 SSR은 다음의 경우에 사용한다.

• SEO(Search Engine Optimization)가 우선순위일 경우
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우
• 웹 페이지가 사용자와 상호작용이 적은 경우

 

 SSR은 자원 이용이 서버에 집중되기 때문에 애플래케이션 유지비용이 높다. 또한, 일부 서드파티 자바스크립트 라이브러리의 경우 서버사이드 렌더링이 불가능할 수 있다.

 

 

 

 

CSR(Client Side Rendering)

 

 SSR이 서버 측에서 JavaScript가 페이지를 렌더링 했다면 CSR은 클라이언트에서 JavaScript가 페이지를 렌더링 한다.

 

 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링 하는 대신에 웹 페이지의 골격이 될 단일 페이지를 JavaScript 파일과 함께 클라이언트에 보낸다.

 

 클라이언트가 웹 페이지를 받으면 함께 전달된 JavaScript 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다.

 

 CSR은 다음의 경우에 사용한다.

• SEO(Search Engine Optimization)가 우선순위가 아닌 경우
• 사이트에 풍부한 상호 작용이 있는 경우
• 웹 애플리케이션을 제작하는 경우

 

 CSR은 느린 렌더링 속도로 사용자 경험이 안 좋아질 수 있다. 또한 모든 렌더링의 부하가 클라이언트 쪽에 집중되기 때문에 사용자에 따라 경험이 달라질 수 있다.

 

 CSR은 search engine bots와 상성이 좋지 않다. JavaScript가 렌더링 해야 하는 정보들은 Google과 같은 search engine index에 포함되어있지 않을 가능성이 매우 높다.

 

 

 

 

SSR과 CSR의 차이점

 

• SSR은 서버에서 페이지를 렌더링하고 CSR은 브라우저(클라이언트)에서 페이지를 렌더링한다. 브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다.
  
  
• 웹 페이지 로딩 시간
  : 첫 페이지를 로딩하는 경우, SSR은 필요한 부분의 HTML과 스크립트만 불러오기 때문에 CSR보다 더 빠르다. 하지만 첫 페이지를 로딩한 후에 다른 곳으로 이동하면 SSR은 첫 페이지를 로딩한 과정을 다시 실행하지만 CSR은 첫 페이지를 로딩할 때 CSS와 모든 스크립트를 한번에 불러왔기 때문에 SSR이 더 느리다.
  
  
• SSR은 매번 서버에 요청을 하기 때문에 CSR보다 서버 자원을 더 많이 사용한다.