CSR 과 SSR 알아보기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 다음 AJAX 에서 Front-Server 와 Back-end Server 를 구분하여 작성할 예정입니다.

이 방식은 각각의 장단점이 존재하기때문에, 어떠한 방식으로 작동하는지를 알아보고, 

그에 대한 개념을 정리해보도록 하겠습니다.

 

=============

1. SSR , MPA

2. CSR , SPA

3. 장단점 비교하기

=============

1. SSR

SSR 은 Server Side Rendering 의 약자입니다.

이 렌더링 방식은 클라이언트에서 서버에 요청을 하면, 서버에서 HTML에 CSS/JavaScript 등 모든 내용을 완성하고,그 완성한 내용을 Client 에 전달하는 방식입니다.

 

이 방식은 아래의 단계를 나타냅니다.

 

1. Client 에서 example.com 에 접속을 시도합니다.

2. Client 에서 example.com 서버에 데이터를 요청합니다.

3. 서버는 요청을 받고, HTML 에 CSS/JavaScript , 그리고 DB 에서 데이터를 받아와서 Client 에게 완전한 형태로 전달합니다.

4. Client 는 응답받은 정보를 브라우저에 출력합니다.

 

이를 그림과 같이 표현하면 아래와 같습니다.

Server Side Rendering

 

이 방식으로 동작하는 것을 MPA (Multi Page Application) 방식이라고도 합니다.

즉, 사용자가 버튼이나, 컨텐츠를 클릭 할 때마다, 서버로부터 HTML 을 새롭게 받아옴으로서, 페이지 전체를 매번 랜더링하는 방식입니다.

기존의 전통적 방식은 모두 MPA 방식이라고 이해하시면 편하겠습니다. 

이전에 프로젝트에서 사용한 방식도 이 MPA 방식입니다. 이 방식의 동작방식은 데이터를 요청할때마다 전체 페이지를 새롭게 다시 그려내는 방식입니다. 즉 페이지 이동시마다 새로고침이 된다는 뜻이기도 합니다.

2. CSR , SPA

CSR은 Client Side Rendering 의 약자입니다. 

이 방식의 구동은, SSR 이라는 기존의 방식에서 조금 다른 방식을 채택하고 있습니다.

최초의 로딩방식은 "전체"를 가져오는 것에는 변함이 없습니다.

 

하지만 이 방식은 기존의 SSR 과는 조금 다른 방식을 채택하고 있습니다.

먼저 Client 가 똑같이 Example.com 에 접속한다고 가정해보겠습니다.

 

기존에는 Server 에서 접속요청을 하면 모든 작업을 완료해서 Client 에게 전달해주었습니다.

하지만 여기서는 2개의 서버로 역활을 나누어 처리를 합니다.

"Front-end" 라고 하는 하나의 서버에서는 "데이터를 제외한 화면을 그리는 코드(ex.HTML,CSS ..)" 를 받아오고, 

데이터는 "Back-End" 라고 하는 다른 서버에서 데이터를 받아오고, 이 서버가 DB와 통신하여 나머지 데이터를 받아오도록 구성합니다.

 

이 방식은 SPA , Single Page Application 이라고 하여, 하나의 페이지로 구성된 웹 애플리케이션입니다. 

즉 SSR 방식의 경우, 페이지에서 이벤트를 실행할 때마다 새로운 HTML을 받아옴으로써, 전체가 새롭게 계속 랜더링 되는것이 비해,

SPA는 필요한 영역만을 Ajax 를 통해 데이터를 바인딩 하는 방식을 취하고 있습니다. 

 

3. 장단점 비교하기

 

정답은 없습니다.

하지만 각각의 장단점이 존재하기 때문에, 그에 맞게 적절하게 혼합해서 사용해야 하는 것이고,

궁극적으로 개발자라면 위 두개의 방식에 대해 이해를 하고 있어야 한다고 생각합니다.

 

이를 간략하게 정리하면 아래와 같습니다.

	SSR/MPA	CSR/SPA
장점	빠른 초기로딩속도를 제공합니다.  SEO에 유리합니다.	빠른 속도를 제공합니다. 필요한 부분만을 요청하고 응답하기 때문에, 서버에서 전체적 부하의 부담이 덜합니다.
단점	서버의 부하에 불리합니다. 매 요청/응답시마다 페이지가 새롭게 렌더링 되기때문에, 사용자에게 보다 연속된 경험을 제공하기 어렵습니다.	초기 로딩 속도가 느립니다. 최초에 모든 JavaScript 파일을 다운로드 해야하기 때문입니다. SEO에 불리합니다.

 

위에서 말하는 SEO는 Search Engine Optimization 의 약자로, 검색 엔진 최적화라고도 합니다.

이것은 결국, 검색엔진이 각 사이트의 내용을 모두 훝어서, 검색엔진에 보다 잘 나타내는 것으로, "크롤링" 이라는 과정을 거치면서 페이지를 링크하고, 이 페이지의 색인을 생성합니다.

 

하지만 CSR 방식은 Ajax 처럼 비동기처리가 되는 페이지들은 크롤링이 올바르게 되지 않기 때문에, 검색엔진에서 불리한 결과를 나타낼 수 있는 것입니다.

 

결과적으로 모든 항목을 공부해야 하는것은 변함이 없습니다.

다만 이러한 방식의 개념적인 부분만을 이해한다면 충분하다고 생각하고, 현업으로 더욱 접근할 수록 깊이 알게 될 거라고 생각합니다.

 

감사합니다.