CSR과 SSR

웹 개발자들이라면 기본적으로 알아야 할 상식이지만 막상 내가 다른 사람에게 자세히 설명할 상황이 됐을 때 이에 대해 뭉뚱그려 알고만 있다는 걸 깨달았다. 따라서 이번 포스팅을 통해 정리하며 다시 한번 개념을 명확하게 이해해보려고 한다.

 

SPA와 MPA

CSR과 SSR에 대해 알기 전 먼저 SPA와 MPA에 대해 알아봐야 겠다.

 

MPA 란?

Multiple Page Application의 약자로, 여러 개의 페이지로 이루어진 Application이다.

전통적인 방식으로서 새로운 페이지 요청 시 또는 새로고침 시 정적 리소스가 다운로드되며 전체 페이지가 다시 랜더링 된다.

HTML 파일을 서버로부터 전달받기 때문에 크롤링하기 적합하여 SEO에 좋다.

또한 서버에서 렌더링 후 가져오기 때문에 첫 로딩이 짧다는 장점이 있다.

하지만 페이지 요청마다 비효율적인 새로고침이 발생하고, 불필요한 템플릿도 로딩하기에 성능저하가 있으며 서버 렌더링에 따른 부하가 있을 수 있다는 단점이 있다.

SPA 란?

Single Page Application의 약자로, 하나의 페이지로 이루어진 Application이다.

따라서 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 수정함으로써 CSR에 적합하다.

한 번만 리소스를 로딩하고 후에 데이터 받아 올 때만 서버와 통신한다.

MPA방식의 문제점을 개선하기 위해 발전시키면서 지금의 SPA가 등장하게 되었다.

초기 SPA는 템플릿 개념인 Backbone.js, Angular.js 등의 라이브러리들이 나왔고, 현재는 컴포넌트 개념인 React.js, Vue.js, Angular2 등 라이브러리 및 프레임워크들이 등장하였다.

자연스러운 UX(사용자경험)를 주고 필요 부분만 로딩이 가능하여 성능 향상이 되며 컴포넌트 별 개발이 가능하기 때문에 생산성이 높아진다는 장점이 있다.

하지만 이 방식에도 단점이 존재한다. 한 번에 리소스를 받기 때문에 초기 구동 속도가 느리다.

또한 CSR방식일 경우 클라이언트에 중요 정보 로직의 노출될 수가 있어 보안 이슈 가능성이 있다.

 

 

 

그럼 SSR 방식과 CSR 방식은 무엇이 다를까?

 

SSR

Server Side Redering의 약자이다. 이름만 봐도 유추 가능하듯이 서버를 통해 렌더링 하여 HTML 파일을 로드하는 방식이다

필요한 부분의 리소스만 불러오기 때문에 첫 로딩 시간이 CSR보다 상대적으로 빠르다. 

하지만 나머지 로딩 시간은 한 번에 리소스를 받아온 CSR에 비해 느리다는 단점이 있다.

CSR

Client Side Rendering의 약자. 클라이언트에서 렌더링 하는 방식으로, 처음 요청 시 빈 HTML과 JS를 브라우저가 다운로드하고 후에 DOM에 동적으로 생성하며 보여준다.

따라서 첫 로드 시 로딩 속도가 길지만 한 번에 모두 받아오기에 나머지 로딩 시간은 빠르다.

또한 SEO(검색 엔진 최적화)에 취약하여 검색 노출이 낮다는  단점이 있다