SPA (Single Page Application)
하나의 html로 모든 페이지 관리
페이지 전환은 클라이언트에서 JS로 동적으로 처리
새로고침 없이, 부드럽고 빠른 화면 전환 제공
SPA 장점
서버에서 추가 HTML 없이, JS로 모든 화면 처리
서버 부하 적음
페이지 전환이 빠름 (JS로 렌더링)
정적 파일(HTML, JS, CSS)만으로 배포 가능 (ex. S3, cloudFront)
정적 파일 배포시 주의 사항
새로고침을 통해 /가 아닌 다른 페이지 (ex. /my-page)를 서버(S3)에 직접 요청하면, S3는 요청한 /my-page 파일을 찾을 수 없어 정적 파일 서버인 S3 특성상 403(Access Denied) 에러가 발생합니다.
자세한 내용
SPA 단점
SEO 약함 (검색 엔진이 내용을 못 읽음)
초기 로딩 시 모든 파일을 불러와 무거움 (JS가 커질수록 느려짐)
새로고침, 즐겨찾기, 뒤로 가기 등의 기능이 기본적으로 어렵지만
→ react-router-dom의 history API로 보완 가능
MPA (Multi Page Application)
페이지마다 HTML 파일 존재
페이지 이동 시 매번 새로고침 발생
서버가 HTML을 직접 제공
MPA 장점
SEO에 강함 (서버가 완성된 HTML 제공)
각각의 html을 가져 페이지별 최적화 가능
MPA 단점
새로고침, 화면 깜빡임 발생
공통 리소스 중복 로딩 (헤더, 푸터 등)
파일 관리가 번거로움 (페이지 수만큼 HTML 필요)
