📌 전통적 웹 페이지 이동 vs. 클라이언트 측 라우팅 차이점
| 구분 | 전통적 웹 페이지 이동 (서버 사이드 렌더링 SSR) | 클라이언트 측 라우팅 (SPA) |
|---|---|---|
| 페이지 로딩 방식 | 매번 새로운 HTML 파일 요청 및 렌더링 | 최초 한 번만 HTML/JS/CSS 요청 후 JS가 페이지 렌더링 관리 |
| 페이지 이동 과정 | 링크 클릭 → 서버 요청 → 새 HTML 반환 → 새로고침 발생 | 링크 클릭 → JS로 필요한 컴포넌트만 렌더링 |
| 서버 요청 빈도 | 페이지 이동마다 서버 요청 발생 | 최초 요청 이후에는 서버 요청 없음 (필요한 데이터만 API로 요청) |
| 로딩 속도 | 페이지 이동 시마다 전체 페이지 재렌더링 → 느림 | 최초 로딩은 다소 느릴 수 있지만 이후 이동은 빠름 |
| 페이지 깜박임 여부 | 매번 새 HTML 파일 로드로 인해 깜박임 발생 | 동일한 SPA 내 이동은 깜박임 없음 |
| 브라우저 히스토리 | 기본 브라우저 동작으로 히스토리 관리 | JS로 브라우저 히스토리 수동 관리 (history.pushState) |
| 사용 사례 | 전통적인 다중 페이지 애플리케이션 (MPA, Multi-Page Application) | React, Vue 등으로 구현된 SPA (Single-Page Application) |
📌 SSR vs SPA 예시
👀 책 쇼핑몰에서 "베스트셀러" 메뉴를 클릭했을 때
- 전통적 웹 페이지 이동 (서버 사이드 렌더링 SSR)
- 브라우저가 "베스트셀러" 페이지의 HTML 파일을 서버에 요청.
- 서버가 HTML 파일과 관련 리소스를 반환.
- 브라우저가 새로운 HTML로 전체 페이지를 다시 렌더링.
- 이전 페이지는 깜박이며 새로고침됨.
- 클라이언트 측 라우팅 (SPA)
- 이미 브라우저에 다운받은 JS가 동작.
- "베스트셀러" 컴포넌트만 새로 렌더링.
- 브라우저 주소창은 변경되지만, 전체 페이지 깜박임은 없음.
💡 결론
- 전통적 방식은 서버 중심, 클라이언트 라우팅은 브라우저(Javascript) 중심
- 클라이언트 라우팅은 페이지 이동 속도와 사용자 경험(UX)을 개선하는 데 효과적
