SPA와 CSR

SPA와 CSR

정의를 알면서도, 나도 모르게 SPA와 CSR 개념을 동의어처럼 혼용하고 있었다.
결론적으로 팀원에게 혼란을 주어 소통이 한 단계 더뎌졌다. 물론 두 개념이 밀접하게 연관되어 있긴 하지만, 그런 만큼 뭉뚱그리지 않고 명확하게 정리한 후에 잘 사용할 필요를 느껴, 짚고 넘어간다.

SPA (Single Page Application)

• 정의
  : 하나의 HTML 페이지를 기반으로 동작하는 웹 애플리케이션 아키텍처 방식.
• 특징
  • 페이지 간 이동 시 새로운 HTML을 불러오지 않고 현재 페이지 내에서 컴포넌트를 교체한다.
    ❓ SPA인데 페이지 간 이동이 무슨 말이냐며 헷갈려했던 과거의 나
  • history.pushState와 history.replaceState를 사용해 URL을 관리한다.
  • 초기에 필요한 모든 리소스를 한 번에 로드합니다

---

CSR (Client Side Rendering)

• 정의
  : 브라우저에서 JavaScript를 사용하여 페이지를 렌더링하는 방식.

• 특징

  • 서버로부터 받은 데이터를 클라이언트(브라우저)에서 처리하여 화면을 그린다.
  • 초기 HTML은 비어있고, JavaScript가 실행된 후 콘텐츠가 채워진다.
  • API 호출 결과를 바탕으로 동적으로 DOM을 조작한다.

---

SPA와 CSR의 관계

SPA는 일반적으로 CSR을 구현 방식으로 채택한다. 그러나 모든 CSR이 SPA인 것은 아니다.

예를 들어

• 기존 MPA에서 특정 부분만 JavaScript로 동적 렌더링하는 경우는 CSR이지만 SPA는 아니다.
• SSR과 CSR을 혼합한 하이브리드 방식의 앱도 CSR을 사용하지만 SPA가 아니다.

---

예시

• 순수 SPA + CSR

  • Gmail : 단일 페이지에서 모든 메일 관련 기능을 JavaScript로 처리
  • Google Maps : 하나의 페이지에서 지도 조작과 정보 표시를 동적으로 수행

• CSR만 사용하는 경우
  • 전통적인 웹사이트에서 댓글 섹션만 JavaScript로 동적 렌더링
  • 정적 블로그에서 검색 기능만 클라이언트에서 처리

• 하이브리드 방식
  • Next.js로 만든 웹사이트 : 초기 로딩은 SSR로, 이후 인터랙션은 CSR로 처리
  • 쇼핑몰 : 상품 목록은 SSR로, 장바구니는 CSR로 구현

---

➡️ SPA는 애플리케이션의 아키텍처 패턴이고, CSR은 렌더링 방식이다. SPA는 반드시 CSR을 사용하지만, CSR이 반드시 SPA를 의미하지는 않는다.