Antigravity Agent
30 lines
4.5 KiB
Markdown
30 lines
4.5 KiB
Markdown
# [[SEO for React Applications]]
|
|
|
|
## 📌 Brief Summary
|
|
React 애플리케이션을 위한 SEO는 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하는 React의 특성상 검색 엔진 봇이 초기 요청 시 빈 HTML 셸만을 보게 되는 문제를 해결하는 과정입니다 [1, 2]. 이를 극복하기 위해 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 올바른 메타데이터 관리 등을 도입하여 검색 엔진이 콘텐츠를 효과적으로 크롤링, 렌더링 및 색인할 수 있도록 최적화합니다 [3-5].
|
|
|
|
## 📖 Core Content
|
|
* **React의 SEO 문제점 (CSR의 한계):**
|
|
기본 React 애플리케이션은 클라이언트 사이드 렌더링(CSR)을 사용하여 브라우저에 최소한의 HTML 뼈대만 전송합니다 [2, 6]. 실제 콘텐츠는 자바스크립트가 다운로드되고 실행된 후에야 DOM에 나타나게 됩니다 [6]. 이는 검색 엔진이 초기 HTML을 먼저 색인하고 이후에 렌더링을 위해 대기열에 넣는 "두 단계 색인(Two-wave indexing)" 지연을 초래하며, 크롤링 예산을 낭비하게 만듭니다 [2, 7, 8].
|
|
|
|
* **검색 엔진 최적화를 위한 렌더링 전략:**
|
|
* **서버 사이드 렌더링(SSR):** 각 요청마다 서버에서 완전한 HTML을 생성하여 전송합니다 [3, 9]. 크롤러가 자바스크립트 실행을 기다릴 필요 없이 즉시 콘텐츠를 읽을 수 있어 SEO에 매우 효과적이며, Next.js나 Remix 같은 프레임워크 사용이 권장됩니다 [5, 9, 10].
|
|
* **정적 사이트 생성(SSG):** 빌드 시점에 HTML을 미리 렌더링하여 가장 빠르고 크롤링하기 쉽습니다 [3, 11]. 블로그, 문서 페이지, 랜딩 페이지 등에 적합합니다 [11, 12].
|
|
* **점진적 정적 재생성(ISR):** SSG의 속도와 SSR의 최신성 유지를 결합한 방식으로, 전자상거래 카탈로그나 뉴스 사이트처럼 주기적으로 업데이트되는 대규모 사이트에 적합합니다 [12, 13].
|
|
|
|
* **동적 메타데이터 및 구조화된 데이터 관리:**
|
|
React와 같은 단일 페이지 애플리케이션(SPA)은 라우트가 변경되어도 `<head>` 태그가 자연적으로 업데이트되지 않습니다 [14]. React Helmet Async 라이브러리나 Next.js의 내장 컴포넌트를 사용하여 각 페이지에 맞는 고유한 제목, 메타 설명, Open Graph 태그를 동적으로 주입해야 합니다 [14-17]. 또한, 검색 엔진이 콘텐츠의 맥락을 정확히 이해할 수 있도록 JSON-LD를 통한 구조화된 데이터(Schema Markup) 추가가 필수적입니다 [15, 18].
|
|
|
|
* **라우팅 및 URL 구조 최적화:**
|
|
검색 엔진은 해시(`#`) 기호 이후의 URL을 무시하는 경향이 있으므로, SEO를 위해서는 해시 라우팅 대신 HTML5 History API에 기반한 `BrowserRouter`를 사용해 깔끔한 URL을 제공해야 합니다 [15, 19-21]. 또한 내부 내비게이션 시 `onClick` 이벤트 핸들러를 사용하면 크롤러가 링크를 발견하지 못하므로, 반드시 표준 `<a>` 태그나 `<Link>` 컴포넌트를 사용해야 합니다 [19, 21].
|
|
|
|
* **코어 웹 바이탈(Core Web Vitals) 및 성능 향상:**
|
|
대규모 자바스크립트 번들과 하이드레이션(Hydration) 지연은 LCP(최대 콘텐츠 풀 페인트), CLS(누적 레이아웃 이동), INP(다음 페인트에 대한 상호작용) 같은 코어 웹 바이탈 지표에 악영향을 미쳐 랭킹을 하락시킵니다 [19, 22, 23]. 이를 개선하기 위해 라우트 기반 코드 분할(Code Splitting), 화면 아래 콘텐츠의 지연 로딩(Lazy Loading), 점진적 하이드레이션 및 이미지 최적화를 철저히 적용해야 합니다 [22, 24, 25].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Core Web Vitals]], [[Single Page Applications (SPA)]], [[React Router]]
|
|
- **Projects/Contexts:** 대규모 전자상거래 사이트가 기존 CSR 기반(Create React App)에서 Next.js의 ISR 환경으로 마이그레이션하여 트래픽과 색인 비율을 획기적으로 향상시킨 프로젝트 [5, 26, 27].
|
|
- **Contradictions/Notes:** 봇에게는 서버 렌더링된 HTML을 제공하고 사용자에게는 클라이언트 사이드 렌더링을 제공하는 동적 렌더링(Dynamic Rendering)은 과거에 우회책으로 사용되었으나, 2026년 기준으로는 클로킹(Cloaking)으로 간주될 위험이 있어 SSR이나 SSG를 사용할 수 없는 경우를 제외하고는 구글에 의해 강력히 권장되지 않습니다 [28, 29].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |