Study

[Study] CSR vs SSR

MJ FE 2023. 4. 28. 21:07

 

 

브라우저 렌더링이란, 브라우저가 서버로부터 HTML, CSS, JavaScript 등의 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다.

공부를 하고 취업 준비를 하면서 자주 보이는 단어가 있는데, 바로 Server Side Rendering (SSR) 이다.

그래서 오늘은 브라우저 렌더링 방식인 SSR에 대해 공부하고, 비교되는 개념인 CSR도 같이 기록해보려고 한다.

 

 

1. SPA vs MPA

공부를 하다보니 먼저 SPA / MPA 관련해서 한번 짚고 넘어가면 좋을 것 같았다.

 

* MPA (Multi Page Application) : 여러 페이지로 구성된 웹 어플리케이션으로, 새로운 페이지를 요청할 때마다 서버로부터 새로운 html을 받아와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식

- SSR 방식으로 렌더링

 

* 장점
1) SEO 관점에서 유리 : 완성된 HTML 파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링하기에 적합
2) 빠른 초기 로딩 : 서버에서 이미 렌더링해 가져오기 때문에
* 단점
1) 페이지 이동 시 화면 깜빡임 : 매 페이지 요청마다 새로고침이 발생하고 전체 페이지를 다시 렌더링하기 때문
2) 페이지 이동 시 불필요한 템플릿도 중복해서 로딩
3) 서버 렌더링에 따른 부하 발생 가능
4) 모바일 앱 개발 시 추가적인 백엔드 작업이 필요해 개발이 복잡해 질 수 있음

 

 

* SPA (Single Page Application) : 하나의 페이지로 구성된 웹 어플리케이션으로, 최초에 필요한 모든 정적 리소스를 한번에 다운로드하고, 이후 새로운 페이지 요청이 있을 경우에 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신하는 방식

- CSR 방식으로 렌더링

- React, Vue 등 웹 개발에서 많이 사용되고 있는 자바스크립트 프레임워크 등이 SPA 방식

- 클라이언트 관점에서 보면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신한다. 즉, 필요한 부분한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 사용자 경험(UX)을 제공

 

* 장점
1) 자연스러운 사용자 경험(UX) : 빠르고 화면 깜빡임이 없음
2) 필요한 리소스만 부분적으로 로딩하고, 서버의 템플릿 연산을 클라이언트로 분산하기 때문에 성능적으로 우수
3) 컴포넌트별 개발이 용이하기 때문에 생산성 측면에서 좋음
* 단점
1) 초기 구동 속도가 느림 : 초기에 필요한 모든 정적 리소스를 한번에 다 받기 때문
2) SEO 관점에서 불리 : 일반적인 SPA 앱은 검색 엔진이 색인을 할 만한 컨텐츠가 존재하지 않기 때문
※ SSR 방식을 적용해 해결 가능

 

 

2. SSR (Server Side Rendering)

SSR은 서버로부터 완성된 html 파일을 받아와 페이지 전체를 렌더링 하는 방식이다. 즉, 서버로부터 초기 화면을 렌더링하기 위한 필수적인 요소를 먼저 가져오기 때문에 CSR보다 빠른 초기 로딩 속도를 보여준다. 렌더링 후 브라우저가 JS 코드를 다운로드하고 html에 실행시키면 웹 페이지에서의 상호작용까지 가능해지는 것이다.

장/단점은 MPA가 SSR 방식을 채택하기 때문에 비슷한 부분들이 있어 추가적인 부분만 조금 자세하게 적어보았다.

 

* 장점
1) 빠른 초기 로딩 속도
2) SEO 관점에서 유리
* 단점
1) 사용자 경험 측면
- 페이지 이동 시 화면 깜빡임 : 매 페이지 요청마다 새로고침이 발생하고 전체 페이지를 다시 렌더링하기 때문
- TTV(Time To View) / TTI(Time To Interact) 간에 간격이 존재하기 때문에 사용자의 클릭 등에 반응이 없을 수 있음
2) 서버 부하 : 페이지 요청 시 서버에서 매번 모든 리소스를 준비해서 응답해야 하기때문에 서버의 부담 증가

 

 

3. CSR (Client Side Rendering)

CSR은 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고, 이후에는 사용자의 요청에 따라 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다. 즉, 서버로부터 초기 화면을 렌더링하기 위해 필요한 완전한 리소스로 응답하기 때문에 SSR보다 초기 로딩 시간이 느리다.

장/단점은 SPA가 CSR 방식을 채택하기 때문에 비슷한 부분들이 있어 추가적인 부분만 조금 자세하게 적어보았다.

 

* 장점

1) 초기 로딩 이후 변경된 부분과 관련된 데이터만 서버에 요청하여 효율적
- 초기 로딩 이후 SSR 보다 빠른 속도
- 서버의 부담을 줄여 서버 부하 감소
- 자연스러운 사용자 경험(UX) : 빠르고 화면 깜빡임이 없음

* 단점

1) 초기 로딩 속도가 느림
2) SEO 관점에서 불리

 

 

4. Universal Server Side Rendering

SPA의 장점과 SSR의 장점을 살리기 위해 두 가지 모두 사용하는 방식이다. SPA에서 사용자의 첫 요청시 SSR을 수행하여 검색최적화 문제를 해결하고, 그 이후는 CSR 방식으로 필요한 데이터만 갱신해 서버의 부담도 줄이는 방식이다.

이러한 방식을 쉽게 구현해주는 프레임워크들이 있다.

- React : Next.js

- Vue : Nuxt...

 

 

5. 후기

SSR과 관련된 글을 찾아보고 기록하면서, Next.js 를 공부하고 게시글로 작성해야 겠다는 생각이 들었다. 또한, 내가 가고 싶은 회사에서 필요로 하는 기술이기에 이를 활용해 프로젝트를 진행해봐야 겠다.

 

 

참고 : https://medium.com/aha-official/아하-프론트-개발기-1-spa와-ssr의-장단점-그리고-nuxt-js-cafdc3ac2053

참고 : https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/