REACT - SPA (Single Page Application)이란?
2026. 1. 7. 23:45ㆍReact
반응형
SPA (Single Page Application)이란?
- HTML은 하나고, JS가 화면을 바꿔가며 앱처럼 동작하는 웹.
SPA의 핵심 특징
- 서버에서 HTML을 한 번만 받음
- 이후 화면 전환은 JS가 처리
- 페이지 이동 시 새 HTML 요청 없음
- 깜빡임 없음, 빠름
REACT는 SPA를 만듦
- index.html 파일 하나 사용
- JS로 화면 구성
React SPA 실제 동작 흐름
최초 요청
GET /
서버 응답:
<body>
<divid="root"></div>
<scriptsrc="bundle.js"></script>
</body>
- 화면에는 아무것도 없음
JS 실행
ReactDOM.createRoot(root).render(<App />)
- JS가 실행되면서 컴포넌트 생성
- 화면 채움
페이지 이동
/home → /about
- HTML 요청하지 않음
- JS가 컴포넌트 교체
- URL만 변경 (History API)
SPA가 SEO에 약한 이유
검색엔진(SEO)은 기본적으로 HTML만 봄
검색엔진 크롤러:
- HTML 요청
- HTML 내용 읽음
- 색인
SPA의 HTML 문제
SPA의 최초 HTML은 보통 이 상태:
<divid="root"></div>
- 본문, 제목, 링크 등 아무런 내용이 없는 html 파일
- 종종 JS 실행하는 SEO도 존재하지만 모든 검색엔진이 그렇진 않음
NEXT.js에서는 어떻게 동작?
- SPA 기반 + SEO 보강
- 서버에서 모든 데이터를 미리 받고 html을 만들어서 넘겨줌
- 모든 데이터가 입력된 html 파일이라 검색엔진이 읽을 수 있음
반응형
'React' 카테고리의 다른 글
| Closure 개념 정리 (0) | 2025.12.29 |
|---|---|
| React 상태 관리 전략: Props와 Store의 선택 기준 (0) | 2025.12.29 |
| React 공식 문서 정리 - UI 표현하기 (0) | 2025.11.24 |
| React 파이버 아키텍처 분석 (0) | 2025.11.24 |
| React 공식 문서 정리 - UI 표현하기 (0) | 2025.11.24 |