# [[React Application SEO Migration]] ## πŸ“Œ Brief Summary React Application SEO Migration은 전톡적인 ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§(CSR) 기반의 React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ κ°€μ§€λŠ” 검색 μ—”μ§„ 색인 및 λ…ΈμΆœ ν•œκ³„λ₯Ό κ·Ήλ³΅ν•˜κΈ° μœ„ν•΄, μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(SSR)μ΄λ‚˜ 정적 μ‚¬μ΄νŠΈ 생성(SSG)κ³Ό 같은 SEO μΉœν™”μ μΈ μ•„ν‚€ν…μ²˜λ‘œ μ „ν™˜ν•˜λŠ” κ³Όμ •μž…λ‹ˆλ‹€. κΈ°λ³Έ React 앱은 초기 μš”μ²­ μ‹œ 빈 HTML μ…Έλ§Œμ„ μ œκ³΅ν•˜μ—¬ 검색 μ—”μ§„ λ΄‡μ˜ 크둀링을 λ°©ν•΄ν•˜λ―€λ‘œ, Next.jsλ‚˜ Remix 같은 ν”„λ ˆμž„μ›Œν¬λ₯Ό λ„μž…ν•˜μ—¬ μ½˜ν…μΈ , 메타데이터, κΉ”λ”ν•œ URL λΌμš°νŒ…μ΄ μ¦‰κ°μ μœΌλ‘œ μ œκ³΅λ˜λ„λ‘ ꡬ쑰λ₯Ό κ°œνŽΈν•˜λŠ” 것이 ν•΅μ‹¬μž…λ‹ˆλ‹€. 이λ₯Ό 톡해 Core Web Vitalsλ₯Ό κ°œμ„ ν•˜κ³  검색 μ—”μ§„ μˆœμœ„ 및 μ˜€κ°€λ‹‰ νŠΈλž˜ν”½μ„ κ·ΉλŒ€ν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ## πŸ“– Core Content * **React의 SEO 과제 (CSR의 ν•œκ³„):** κΈ°λ³Έ React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ€ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 톡해 화면을 κ·Έλ¦¬λŠ” CSR 방식을 μ‚¬μš©ν•©λ‹ˆλ‹€. 이둜 인해 ꡬ글봇(Googlebot) λ“±μ˜ 검색 엔진이 μ ‘κ·Όν–ˆμ„ λ•Œ μ΄ˆκΈ°μ—λŠ” λ‚΄μš©μ΄ μ—†λŠ” 빈 HTML 골격(`
`)만 보게 λ©λ‹ˆλ‹€. 봇이 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό λ‹€μš΄λ‘œλ“œν•˜κ³  μ‹€ν–‰ν•  λ•ŒκΉŒμ§€ κΈ°λ‹€λ €μ•Ό ν•˜λŠ” '2단계 색인(Two-wave indexing)' 과정을 거치게 되며, μ΄λŠ” 크둀링 μ˜ˆμ‚° λ‚­λΉ„, 인덱싱 μ§€μ—°, μ½˜ν…μΈ  λˆ„λ½, 그리고 λŒ€κ·œλͺ¨ μžλ°”μŠ€ν¬λ¦½νŠΈ λ²ˆλ“€λ‘œ μΈν•œ Core Web Vitals 점수 ν•˜λ½μ„ μ΄ˆλž˜ν•©λ‹ˆλ‹€. * **μ£Όμš” λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ μ „λž΅ (λ Œλ”λ§ 방식 개편):** * **μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ (SSR):** 각 μš”μ²­λ§ˆλ‹€ μ„œλ²„μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‹€ν–‰ν•˜μ—¬ μ™„μ „ν•œ HTML을 생성해 μ œκ³΅ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. ꡬ글봇이 μžλ°”μŠ€ν¬λ¦½νŠΈ 싀행을 기닀릴 ν•„μš” 없이 μ¦‰μ‹œ μ½˜ν…μΈ λ₯Ό μˆ˜μ§‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ§ˆμΌ€νŒ… μ‚¬μ΄νŠΈ, λΈ”λ‘œκ·Έ, μ‹€μ‹œκ°„ 동적 μ½˜ν…μΈ μ— μ ν•©ν•˜λ©° Next.js, Remix ν”„λ ˆμž„μ›Œν¬λ₯Ό 톡해 λ„μž…ν•©λ‹ˆλ‹€. * **정적 μ‚¬μ΄νŠΈ 생성 (SSG) 및 점진적 정적 μž¬μƒμ„± (ISR):** λΉŒλ“œ μ‹œμ μ— λͺ¨λ“  HTML을 사전 생성(SSG)ν•˜κ±°λ‚˜, λ°±κ·ΈλΌμš΄λ“œμ—μ„œ 주기적으둜 정적 νŽ˜μ΄μ§€λ₯Ό μ—…λ°μ΄νŠΈ(ISR)ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. κ°€μž₯ λΉ λ₯Έ λ‘œλ”© 속도와 μ™„λ²½ν•œ 크둀링 ν™˜κ²½μ„ μ œκ³΅ν•˜μ—¬ μ „μžμƒκ±°λž˜(E-commerce)λ‚˜ λŒ€κ·œλͺ¨ λ¬Έμ„œ μ‚¬μ΄νŠΈμ— μœ λ¦¬ν•©λ‹ˆλ‹€. * **동적 λ Œλ”λ§ (Dynamic Rendering):** 검색 μ—”μ§„ λ΄‡μ—κ²ŒλŠ” 사전 λ Œλ”λ§λœ HTML을 μ œκ³΅ν•˜κ³ , 일반 μ‚¬μš©μžμ—κ²ŒλŠ” CSR을 μ œκ³΅ν•˜λŠ” 방식(예: Prerender.io ν™œμš©)μž…λ‹ˆλ‹€. 단, μ΄λŠ” SSR 적용이 λΆˆκ°€λŠ₯ν•œ 경우의 μž„μ‹œλ°©νŽΈ(Fallback)μž…λ‹ˆλ‹€. * **성곡적인 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜μ„ μœ„ν•œ 핡심 기술 μš”κ±΄:** * **λΌμš°νŒ… μ΅œμ ν™”:** ν•΄μ‹œ λΌμš°νŒ…(예: `/#/about`)은 검색 엔진이 κ°œλ³„ νŽ˜μ΄μ§€λ‘œ μΈμ‹ν•˜μ§€ λͺ»ν•˜λ―€λ‘œ, HTML5 History APIλ₯Ό ν™œμš©ν•œ `BrowserRouter` 기반의 κΉ”λ”ν•œ URL μ²΄κ³„λ‘œ μ „ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€. * **동적 메타데이터 및 κ΅¬μ‘°ν™”λœ 데이터:** νŽ˜μ΄μ§€ μ „ν™˜ μ‹œ React Helmet(λ˜λŠ” ν”„λ ˆμž„μ›Œν¬ λ‚΄μž₯ κΈ°λŠ₯)을 μ‚¬μš©ν•˜μ—¬ ``, 메타 μ„€λͺ…, Open Graph νƒœκ·Έκ°€ λ™μ μœΌλ‘œ μ—…λ°μ΄νŠΈλ˜λ„λ‘ μ²˜λ¦¬ν•΄μ•Ό ν•©λ‹ˆλ‹€. λ˜ν•œ 검색 엔진이 μ½˜ν…μΈ μ˜ λ§₯락을 μ΄ν•΄ν•˜λ„λ‘ JSON-LD ν˜•νƒœμ˜ κ΅¬μ‘°ν™”λœ 데이터(Schema.org)λ₯Ό μ‚½μž…ν•΄μ•Ό ν•©λ‹ˆλ‹€. * **μ‹œλ§¨ν‹± 크둀링 지원:** λ‚΄λΆ€ λ‚΄λΉ„κ²Œμ΄μ…˜ μš”μ†ŒλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ `onClick` 이벀트 λŒ€μ‹  λ°˜λ“œμ‹œ ν‘œμ€€ `<a href>` νƒœκ·Έ(λ˜λŠ” `<Link>` μ»΄ν¬λ„ŒνŠΈ)λ₯Ό μ‚¬μš©ν•˜μ—¬ 봇이 링크λ₯Ό 따라 μ •μƒμ μœΌλ‘œ 이동할 수 있게 λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€. * **λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ 효과 (사둀 연ꡬ):** κΈ°μ‘΄ CSR(Create React App)둜 κ΅¬μΆ•λœ 10,000개 μƒν’ˆ 규λͺ¨μ˜ 이컀머슀 μ‚¬μ΄νŠΈλ₯Ό Next.js(ISR)둜 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ν•œ κ²°κ³Ό, 검색 μ—”μ§„ μƒ‰μΈμœ¨μ΄ 40%μ—μ„œ 95%둜 κΈ‰μ¦ν–ˆμŠ΅λ‹ˆλ‹€. 초기 응닡 μ‹œκ°„(TTFB)은 200msμ—μ„œ 50ms둜 λ‹¨μΆ•λ˜κ³  LCP(Largest Contentful Paint)λŠ” 4.2초(Poor)μ—μ„œ 1.8초(Good)둜 κ°œμ„ λ˜μ—ˆμœΌλ©°, μ˜€κ°€λ‹‰ νŠΈλž˜ν”½κ³Ό 수읡이 각각 70%, 75% μ¦κ°€ν•˜λŠ” μ„±κ³Όλ₯Ό λ‹¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€. ## πŸ”— Knowledge Connections - **Related Topics:** [[Server-Side Rendering (SSR)]], [[Static Site Generation (SSG)]], [[Client-Side Rendering (CSR)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]], [[Next.js]] - **Projects/Contexts:** [[E-commerce Migration to Next.js Case Study]] - **Contradictions/Notes:** 동적 λ Œλ”λ§(Dynamic Rendering) κΈ°μˆ μ— λŒ€ν•΄, μ†ŒμŠ€μ—μ„œλŠ” 봇과 μ‚¬μš©μžμ—κ²Œ λ‹€λ₯Έ μ½˜ν…μΈ λ₯Ό λ³΄μ—¬μ£Όκ²Œ 될 경우 ν΄λ‘œν‚Ή(Cloaking)으둜 κ°„μ£Όλ˜μ–΄ κ΅¬κΈ€λ‘œλΆ€ν„° νŽ˜λ„ν‹°λ₯Ό 받을 μœ„ν—˜μ΄ μžˆλ‹€κ³  κ²½κ³ ν•©λ‹ˆλ‹€. 2026λ…„ κΈ°μ€€ ꡬ글은 이 방식을 ꢌμž₯ν•˜μ§€ μ•ŠμœΌλ©°(Deprecated), 가급적 SSRμ΄λ‚˜ SSG μ•„ν‚€ν…μ²˜λ‘œ μ™„μ „νžˆ μ „ν™˜ν•  것을 κΆŒκ³ ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. --- *Last updated: 2026-04-26*