# [[Single Page Application (SPA)]]

## 📌 Brief Summary
Single Page Application(SPA)은 브라우저가 완전히 새로운 페이지를 로드하는 기본 방식 대신, 웹 서버에서 새로운 데이터를 받아 현재 웹 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 애플리케이션입니다 [1]. 이러한 전환은 JavaScript를 통해 클라이언트 측(브라우저)에서 이루어지며, Gmail이나 Spotify와 같이 빠르고 유동적인 앱과 같은 경험을 제공합니다 [1, 2]. 하지만 클라이언트 사이드 렌더링(CSR)에 의존하는 아키텍처 특성상 검색 엔진 크롤러와 AI 에이전트가 콘텐츠를 색인하고 렌더링하는 데 심각한 어려움을 겪는다는 단점이 존재합니다 [3-5].

## 📖 Core Content
* **동작 원리 및 장점:** 
  SPA는 초기 셸(Shell)이 로드된 후에는 화면 전환이 즉각적으로 느껴지며, 페이지를 탐색하는 동안에도 오디오가 중단 없이 재생되는 등의 상태 유지(State Persistence)가 가능합니다 [2]. 또한 프론트엔드(UI)와 백엔드(API)를 명확히 분리하여 개발자 경험을 향상시킵니다 [2]. 기본적으로 클라이언트 사이드 렌더링(CSR) 방식을 사용합니다 [6].

* **검색 엔진 최적화(SEO)의 주요 과제:**
  * **렌더링 지연 (The CSR Gap):** 전통적인 SPA는 빈 HTML 셸을 먼저 로드한 뒤 JavaScript를 통해 콘텐츠를 렌더링합니다. Googlebot은 초기 HTML을 먼저 색인한 뒤 JavaScript를 렌더링하는 대기열(Queue)에 URL을 배치하는 두 단계(Two-wave) 색인 과정을 거치기 때문에, 렌더링 자원 한계와 타임아웃 등으로 검색 결과 반영이 며칠씩 지연되거나 콘텐츠 누락이 발생할 수 있습니다 [4, 7].
  * **AI 크롤러의 한계:** AI 모델을 훈련시키는 크롤러(예: GPTBot, ClaudeBot)는 비용 및 규모의 문제로 JavaScript 실행을 건너뛰는 경우가 많아, 순수 SPA의 텍스트를 인식하지 못하여 AI 검색 엔진 결과나 답변에 인용되지 못할 수 있습니다 [5].
  * **코어 웹 바이탈 (Core Web Vitals):** 크고 무거운 JavaScript 번들을 다운로드하고 파싱, 실행하느라 브라우저의 메인 스레드가 멈추는 'Hydration Bloat' 현상이 발생하기 쉽습니다. 이는 사용자 상호작용 지연을 측정하는 핵심 지표인 INP(Interaction to Next Paint) 점수를 악화시켜 페널티를 받을 수 있습니다 [5].
  * **소프트 404 (Soft 404s) 문제:** 클라이언트 측에서 라우팅이 처리되므로, 존재하지 않는 URL에 접속해도 서버는 정상 상태(200 OK)로 빈 HTML을 반환하고 이후에야 JavaScript가 "Not Found"를 표시합니다. 이는 크롤러에게 콘텐츠가 얇은 유효 페이지로 인식되어 도메인 전체의 품질 점수를 떨어뜨리고 크롤 예산을 낭비하게 만듭니다 [8, 9].

* **SPA 최적화 및 모범 사례:**
  * **서버 기반 렌더링 도입:** SEO와 성능 문제를 근본적으로 해결하기 위해 순수 CSR 대신 Server-Side Rendering(SSR), Static Site Generation(SSG), 또는 Incremental Static Regeneration(ISR) 방식 등으로 렌더링의 주체를 서버나 빌드 과정으로 옮기는 것이 강력히 권장됩니다 [10-12].
  * **URL 및 라우팅 설정:** 검색 엔진이 개별 페이지로 색인할 수 있도록 해시 라우팅(`/#/about`)을 피하고 HTML5 History API를 사용하여 깔끔한 URL 구조를 사용해야 합니다 [13]. 또한 내부 내비게이션은 JavaScript의 `onClick` 이벤트 핸들러가 아닌 표준 `<a href>` 태그를 사용해야 크롤러가 링크를 추적할 수 있습니다 [13, 14].
  * **동적 메타데이터 관리:** 페이지가 전환될 때마다 `<title>`, 메타 설명(Meta Description), 캐노니컬(Canonical) 태그가 동적으로 업데이트되어야 합니다. React Helmet과 같은 도구를 사용하여 메타데이터를 렌더링에 맞게 관리해야 SEO에서 불이익을 받지 않습니다 [15, 16].

## 🔗 Knowledge Connections
- **Related Topics:** [[Client-Side Rendering (CSR)]], [[Server-Side Rendering (SSR)]], [[Static Site Generation (SSG)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]], [[Interaction to Next Paint (INP)]]
- **Projects/Contexts:** [[React Router]], [[Next.js]]
- **Contradictions/Notes:** 검색 엔진 봇에게는 사전 렌더링된 HTML을 제공하고 일반 사용자에게는 CSR을 제공하는 'Dynamic Rendering(동적 렌더링)' 기법은 과거에 SPA의 대안으로 사용되었습니다. 하지만 2026년 기준 Google은 사용자와 봇에게 다른 콘텐츠를 보여주는 클로킹(Cloaking) 위험이 있다며 명시적으로 권장하지 않고 있으며, SSR이나 SSG를 사용할 수 없는 경우의 최후의 수단으로만 여겨야 합니다 [17, 18].

---
*Last updated: 2026-04-26*