오늘날 웹 애플리케이션을 개발한다고 하면 대부분 React, Vue, Angular와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. SSR과 CSR 개념에 대해 다루기 전에 웹 애플리케이션의 페이지 구성 방식(SPA, MPA)에 대해 짚어보자.
SPA 와 MPA
SPA(Single Page Application)
하나의 페이지로 구성된 웹 애플리케이션이며, SPA로 개발된 웹사이트는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다.
MPA(Multi Page Application)
탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다.
SSR(Server-Side-Rendering)
서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식
동작 과정
- 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보냄
- 서버는 화면 표현에 필요한 데이터를 DB에서 얻어와 템플릿 엔진을 통해 HTML을 작성
- 렌더링이 가능한 완벽한 HTML, CSS, JS코드를 브라우저에 응답
- 브라우저에서는 전달 받은 페이지 리소스(HTML, CSS, JS)를 기반으로 파싱을 수행
- 이후 GUI 렌더링을 수행하고 화면이 보여짐
장점
- 하나의 서버 애플리케이션으로 Front, Back을 구성할 수 있어 설계가 쉽고 간단한 구조를 가지므로 개발 난이도가 낮고, 빠르게 구축 가능하다.
- 검색 엔진(SEO)에 의해 해석 될 수 있는 구조, 크롤링도 가능하게 만든다.
- 클라이언트의 부담이 적고, 빠른 초기 로딩을 가진다. (필수적인 요소를 먼저 가져옴)
단점
- Front와 Back 요소가 결합되어 있어 Front 변경으로 인해 Back 코드도 변경된다.
- 매번 페이지를 요청할 때 마다 새로고침 되기 때문에 UX가 다소 떨어질 수 있다.
- 서버측 부하가 증가한다.(요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답)
CSR(Client-Side-Rendering)
사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식
- 클라이언트는 초기화면을 로드하기 위해 서버에 요청을 보낸다.
- 서버는 JS파일로 화면을 렌더링하기 위한 일부 파일만 응답
- 응답 받은 JS를 파싱하여 렌더링에 필요한 데이터(DB 컬럼)와 리소스(CSS, 이미지)를 다시 서버로 요청하여 추가적인 리소스를 전달받음
- 전달 받은 리소스를 기반으로 클라이언트에서 조립하여 GUI 렌더링을 수행
장점
- Front/Back 코드가 분리되어 있어 잦은 Front 변경에도 Back은 영향이 없음
- 빠른 속도와 서버 부하 감소 (변경 부분 데이터만 가져옴으로, SSR보다 속도가 빠름)
- 사용자 친화적(페이지 안에 컨텐츠를 클릭하여 다음 단계로 전환 하는 과정에서 링크가 없기 때문에 깜빡임 없이 부드러운 이동 가능)
단점
- Front/Back을 분리하여 설계하므로 초기 개발 시 소요 시간 및 개발 비용 증가
- 전통적인 구조보다 레퍼런스가 적어 수준 높은 엔지니어링 기술을 요구한다.
- 검색 엔진(SEO)에 노출될 수 없다.
- 높은 클라이언트 부담, 초기 로딩 속도가 SSR보다 느릴 수 있다.
마무리
SPA와 MPA는 각각 페이지 로딩 방식과 사용자 경험에서 차이를 보인다. SPA는 클라이언트에서 동적으로 페이지를 업데이트하여 부드러운 사용자 경험을 제공하지만, 초기 로딩 속도나 SEO에 불리할 수 있다. MPA는 서버에서 각 페이지를 렌더링해 SEO나 초기 로딩 속도에 유리하지만, 페이지 전환 시 새로고침이 발생하여 사용자 경험이 다소 떨어질 수 있다.
SSR과 CSR은 이 두 가지 렌더링 방식에서 서버와 클라이언트의 역할 차이를 보여주며, 웹 애플리케이션의 요구사항에 따라 적절한 방식을 선택하는 것이 중요하다.
참조
어제보다 더 나은