SPA (single page application)
리액트, 앵귤러 등 최근에 뜨고 있는 프레임워크 및 라이브러리가 사용하는 방식. 컴포넌트 단위로 불러옴. 페이지 전체가 다시 렌더링되어서 데이터를 갈아치우는 게 아니고 그 컴포넌트 부분만 바뀜. CSR과 짝꿍.
MPA(multi page application)
전통적인 방법(php, jsp). 예를 들어 탭메뉴 클릭하면 그에 따른 html 전체를 다시 불러오는 방식. 화면 깜빡임 발생. SSR과 짝꿍.
CSR (client side rendering)
클라이언트 쪽에서 랜더링하는 방식. 일단 html 빈 뼈대부터 불러온 후에 연결된 css, js 링크 다운로드 후 동적 DOM을 생성. 초기에 다 불러와야하기 때문에 초기 랜더링 속도가 느리지만 한번 불러오고 나면 이후에 페이지 변경시 필요한 데이터만 서버에 요청하면 되기 때문에 구동 속도는 빨라짐. 서버가 최초에 빈 뼈대만 전달하기 때문에 서버 부하가 적음. 그러나 최초에 빈 뼈대만 읽기때문에 SEO 검색엔진 최적화(웹크롤링)에는 불리.
SSR (server side rendering)
브라우저가 서버에 콘텐츠 요청하면 최초에 필요한 html, css, js 모두 브라우저에 전달.
SR이 html -> 모든 css -> 모든 자바스크립트. 순으로 불러온 뒤에 데이터를 불러오는 반면
SSR은 모든 데이터를 html에 담아서 불러옴. 빈 껍데기가 아니라 SEO 까지 다 담아서 가져옴. 그래서 사용자가 동작 요청 하는 시점과 인터렉션 시점에 차이가 있어서 반응속도가 느릴 수 있음. 요청시 서버에서 그때그때 보내주는 방식.
SSG (static site generation) : gatsby, next.js
SSR은 서버에서 요청 즉시 만들어줌. 데이터 변동 많은 사이트가 적합.
SSG는 미리 만들어두기 때문에 데이터 변동이 거의 없는 사이트가 적합.
정리 (비교표)
| 개념 | 주요 특징 | SEO 지원 | 속도 | 사용 예시 |
|---|---|---|---|---|
| SPA | 한 개의 HTML에서 동적으로 렌더링 | ❌ (약함) | 빠른 페이지 전환 | 인터파크 예매, Trello, Facebook |
| MPA | 여러 HTML 페이지로 구성됨 | ✅ (강함) | 새로고침으로 인해 속도가 느릴 수 있음 | 네이버 뉴스, 쇼핑몰 |
| SSR | 서버에서 HTML을 완성 후 전송 | ✅ (강함) | 초기 로딩 빠름 (JS 실행 전에도 화면 보임) | Next.js 기반 웹사이트 |
| CSR | 클라이언트에서 JS로 렌더링 | ❌ (약함) | 초기 로딩 느림, 이후 빠름 | 일반적인 React/Vue 앱 |
💡 어떤 걸 써야 할까?
- SEO가 중요하다? → SSR or MPA
- 빠른 화면 전환과 UX가 중요하다? → SPA + CSR
- SEO + 빠른 렌더링을 동시에 하고 싶다? → SSR + SPA (Next.js)
- 단순한 정적 사이트(블로그, 문서 등)? → MPA
CSR 단점 해결
-
js 번들 크기 줄여서 CSR 초기 로딩 속도 보완
code splitting
tree-shaking
chunk 분리 -
SEO 개선 : pre-rendering을 통해 사전에 html 불러옴
-
SSR, SSG 도입 : next.js, gatsby.js(ssg에 최적화 되어있긴 하지만 다양한 플러그인 제공.), nuxt.js 등
결국 서비스의 성격에 따라 랜더링 방식을 다르게 지정해야함.
고객 개인 정보로 이루어진 페이지들은 보안이 더 중요하고 SEO가 굳이 필요없기 때문에 CSR이 유리.
회사 홈페이지같이 거의 데이터 변화는 없지만 인터렉션이 중요하면 SSR.
검색엔진 최적화도 중요하고 빠른 인터렉션도 중요하면 CSR + SSR
