20251110 SPA, MPA, CSR, SSR의 차이

리액트의 라우터에 대해 배웠다. 라우터에 대해 배우다보니 SPA, MPA, CSR, SSR 등에 대해 공부할 필요가 있다고 느껴졌다.

 

SPA, MPA, CSR, SSR의 차이

SPA, CSR, SSR을 각각 살펴보고 어떻게 다른 지 살펴보자.

 

SPA(Single Page Application)

출처 : https://www.ktpdigitallife.com/spasingle-page-application-%EB%9C%BB/

SPA의 개념

SPA(Single Page Application)는 서버로부터 전체 페이지를 새로 받아오는 대신, 필요한 데이터만 비동기적으로 받아와서 현재 페이지를 동적으로 업데이트하는 단일 페이지 어플리케이션이다. 이 방식은 페이지 전환 시 새로고침이 발생하지 않아 네이티브 앱과 같은 빠르고 부드러운 사용자 경험을 제공한다. 

 

SPA의 특징

• 동적 컨텐츠 로딩 : SPA는 필요한 컨텐츠를 서버에서 비동기적으로 가져와서 페이지를 업데이트한다. 사용자가 페이지를 이동해도 전체 페이지를 다시 로드하지 않고 필요한 부분만 갱신하기 때문에 빠른 웹 경험을 할 수 있다.
• 클라이언트 사이드 라우팅 : SPA는 클라이언트 측에서 JavaScript로 라우팅을 처리한다. MPA와 다르게 서버로부터 새로운 페이지를 요청하지 않고도 다른 화면으로 전환할 수 있다.
• 상태 관리 : SPA는 클라이언트 측에서 애플리케이션 상태를 관리한다. 사용자 인터페이스의 현재 상태에 따라 서버와 데이터를 주고받아 동기화할 수 있다. 덕분에 사용자에게 빠른 인터렉션을 제공할 수 있다.
• 재사용 가능한 컴포넌트 : SPA는 일반적으로 재사용 가능한 컴포넌트 기반 구조를 가지고 있어, 유지보수성과 확장성이 뛰어나다. 컴포넌트를 독립적으로 개발 및 테스트를 할 수 있어 생산성도 향상된다.

SPA와 MPA의 차이점

출처 : https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA

SPA는 모던 웹 애플리케이션이라고 불리고 MPA(Multi Page Application)는 SPA와 반대되는 전통적인 웹 애플리케이션 개념이다.

MPA는 페이지를 이동하면 서버에서 새로운 페이지를 새로 렌더링해서 전송해주는 방식이다. 페이지 안에 내용이 많이 없을 때는 사용하는 데 어려움이 없었지만, 페이지에 정보가 많아지면서 이런 방식은 서버의 비효율과 느린 사용 경험을 주게 된다.

 

웹사이트의 요구사항과 특성에 따라 어떤 애플리케이션을 만들지 결정하면 되는데, 페이지가 많고 빠른 인터렉션이 필요하면 SPA 프레임워크를, 간단한 정보를 제공하는 서비스라면 MPA 방식도 괜찮다.

 

CSR(Client Side Rendering)

출처 : https://d2.naver.com/helloworld/7804182

CSR의 개념

CSR은 웹 페이지의 렌더링을 서버가 아니라 클라이언트(브라우저)에서 자바스크립트로 처리하는 방식이다. 서버는 초기 HTML 뼈대와 JS/CSS 파일만 전달하고, 브라우저가 JS를 실행하여 DOM을 구성하고 화면을 만든다.

CSR의 동작 과정

출처 : https://homeless-programmer.tistory.com/5

1. 사용자가 웹사이트에 방문하면 브라우저가 서버에 컨텐츠 요청
2. 서버는 빈 뼈대 HTML을 응답으로 회신
3. 브라우저가 연결된 JS링크를 통해 서버로부터 JS파일 다운로드
4. JS를 통해 동적으로 페이지를 만든 후, 브라우저에 출력

CSR의 장점

CSR은 JS파일을 다운로드하고 동적으로 DOM을 생성하는 시간동안 기다리기 때문에 초기 로딩속도가 느리지만, 초기 로딩 이후 페이지 일부를 변경할 때 서버에서 해당 데이터만 요청하기 때문에 초기 이후 구동 속도가 빠른게 장점이다.

또한, 서버는 빈 뼈대 HTML만을 넘기기 때문에 서버의 부하가 적다. 때문에 연산이나 라우팅 등을 클라이언트 측에서 처리하게 되며 이는 반응속도의 향상에 도움이 된다.

CSR의 단점

SEO에 불리하다. 화면이 JS 실행 이후 만들어지므로 검색 엔진이 내용을 못 읽을 수 있다. 브라우저들이 갖는 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만든다. 하지만 CSR의 경우 첫 페이지 로딩시 빈 뼈대 HTML을 서버로부터 받기 때문에 파일이 비어있다. 

이 경우 색인할만한 컨텐츠가 존재하지 않기 때문에 크롤링 봇 입장에서는 최적화가 어렵다.

또한, 보안 측면에서도 단점이 있다. 쿠키나 로컬스토리지에 저장되는 사용자 정보 도용에 취약하며, 핵심 기능이 클라이언트에서 수행되므로 로직이 노출될 가능성이 있다.

초기 로딩이 느리다는 단점도 있다. 실행해야 할 JS가 많을수록 첫 화면에 나오는데 오래 걸린다.

 

SSR(Server Side Rendering)

출처 : https://d2.naver.com/helloworld/7804182

SSR의 개념

SSR은 클라이언트에게 보내기 전에 HTML을 서버에서 미리 렌더링한 뒤 전달하는 방식이다. 브라우저는 완성된 HTML을 바로 받아서 화면에 표시할 수 있다.

SSR의 동작과정

출처 : https://homeless-programmer.tistory.com/5

1. 사용자가 웹사이트에 방문하면 브라우저가 서버에 컨텐츠 요청
2. 이에 서버는 페이지에 필요한 데이터를 얻고 삽입. CSS까지 적용하여 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 회신
3. 브라우저에서는 JS코드를 다운로드하고 HTML에 JS로직을 연결

SSR의 장점

SSR은 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 회신되기 때문에 SEO에 유리하다. 즉 크롤링 봇이 HTML 파일을 읽기 편하다는 것이다. 또한 JS코드를 다운받고 실행하기 전에 사용자가 이미 HTML이 렌더링된 화면을 볼 수 있다. 그렇기 때문에 초기 로딩 속도가 빠르다.

보안 측면에서도 CSR보다 이점이 많다. 서버에서 렌더링을 할 때 escaping과 같은 조치를 취할 수 있어 안정적이며, XSS공격에 대한 위험성이 낮으며, CSRF공격의 노출 가능성도 적다.

SSR의 단점

렌더링된 페이지가 보이는 시점에서 이벤트를 발생 시키면 반응이 없을 수도 있다. 그 이유는 상호작용이 가능한 페이지처럼 보일 뿐, 실제로는 클라이언트 측에서 JS가 실행되고 이벤트 핸들러가 있는 JS로직이 모두 연결될 때까지는 사용자 입력에 응답이 없다는 것이다.

또한, 매 요청마다 HTML을 생성하므로 트래픽이 많으면 서버 부담이 커진다.

 

요약 정리

• SPA는 하나의 페이지 위에서 JS로 화면을 변하는 방식으로 전환 속도가 빠르고 앱 같은 UX를 제공하지만 초기 로딩이 무거울 수 있다.
• MPA는 페이지 이동 시마다 서버에서 새로운 HTML을 받는 구조로 SEO에 유리하고 안정적이지만 화면 전환이 상대적으로 느리다.
• CSR은 렌더링을 브라우저에서 수행해 서버 부하가 적고 인터렉션이 빠르지만 초기 로딩과 SEO에서 불리할 수 있다.
• SSR은 서버에서 렌더링하여 초기 표시 속도와 SEO가 유리하지만 서버 부하가 증가하고 페이지 전환 부드러움이 떨어질 수 있다.

느낀 점

리액트를 배우면서 더 많이 공부해야되겠다는 느낌을 받는다. 모르거나 헷갈리게 알고 있는 경우가 많은 것 같다.

이런 내용들을 잘 적용해서 프로젝트를 진행할 때 적절한 방식을 선택해봐야겠다.

 

참고 사이트

• https://docs.tosspayments.com/resources/glossary/spa

SPA(Single Page Application) | 토스페이먼츠 개발자센터

• https://homeless-programmer.tistory.com/5

[Web]: 웹 개발 _ SSR/CSR 개념 정리

• https://d2.naver.com/helloworld/7804182