feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

10_Wiki/Topics/Frontend/웹 렌더링 전략 (CSR, SSR, SSG, ISR).md

@@ -1,9 +1,29 @@
+---
+id: wiki-2026-0508-웹-렌더링-전략-csr-ssr-ssg-isr
+title: "웹 렌더링 전략 (CSR, SSR, SSG, ISR)"
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
+tags: [uncategorized]
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
+---
+
 # [[웹 렌더링 전략 (CSR, SSR, SSG, ISR)|웹 렌더링 전략 (CSR, SSR, SSG, ISR]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 웹 렌더링 전략은 웹 애플리케이션의 HTML, CSS, [[JavaScript|JavaScript]] 코드를 브라우저가 화면에 표시하는 상호작용 가능한 형태(UI)로 변환하는 방식을 의미하며, 언제 어디서(클라이언트 혹은 서버) 렌더링을 수행할지에 대한 결정입니다 [1, 2]. 대표적인 방식으로 클라이언트 측에서 렌더링을 수행하는 CSR, 서버에서 HTML을 생성하는 SSR, 빌드 시점에 정적 파일을 생성하는 SSG, 그리고 이를 결합해 주기적으로 정적 페이지를 업데이트하는 ISR이 있습니다 [2-4]. 각 렌더링 전략은 초기 로드 속도, 검색 엔진 최적화(SEO), 상호작용 속도, 서버 부하 측면에서 명확한 장단점을 가지므로, 애플리케이션의 목적과 콘텐츠 업데이트 빈도에 따라 적절한 방식을 선택해야 합니다 [5-7].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 *   **클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)**
     *   동작 원리: 서버는 뼈대만 있는 빈 HTML 파일과 애플리케이션 구동에 필요한 JavaScript 번들을 브라우저로 전송합니다 [8-11]. 이후 브라우저가 JavaScript를 다운로드하고 실행하여 동적으로 UI를 구축하고 필요한 데이터를 가져옵니다 [8-11].
     *   장점: 초기 로딩 이후에는 전체 페이지 새로고침 없이 빠른 전환이 가능하여 부드럽고 상호작용이 풍부한 앱과 같은 사용자 경험을 제공합니다 [8, 12-15]. 렌더링 부하를 클라이언트로 분산시켜 서버 부하가 낮습니다 [12, 15, 16].
@@ -28,10 +48,64 @@
     *   단점: 재검증 과정이나 백그라운드 재생성 설정 등 구성의 복잡성이 따르며, 재생성 주기 도중에는 일시적으로 예전 데이터(Stale data)가 노출될 위험이 존재합니다 [53, 55]. 
     *   적합한 사용처: 방대한 카탈로그를 가진 대규모 전자상거래 플랫폼, 지속적인 최신화가 필요하지만 실시간 동기화까지는 불필요한 뉴스 포털 등 [4, 54, 56].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[하이드레이션 (Hydration)|하이드레이션 (Hydration]], 단일 페이지 애플리케이션 (SPA), 검색 엔진 최적화 (SEO), [[Core Web Vitals|Core Web Vitals]], 렌더 트리 ([[Render Tree|Render Tree]])
 - **Projects/Contexts:** [[Next.js|Next.js]]의 하이브리드 렌더링 기능, 웹 성능 및 상호작용 최적화 프로젝트
 - **Contradictions/Notes:** SSR은 초기 화면 표시 속도를 높여(FCP 개선) 사용자 경험을 향상시킨다고 하지만, 이면의 하이드레이션(Hydration) 과정이 지연될 경우 눈에는 보이지만 클릭은 되지 않는 '불쾌한 골짜기' 경험을 초래하여 상호작용 지표(TTI)를 악화시킬 수 있다는 모순적인 특징을 가집니다 [25, 33, 35, 57].
 
 ---
-*Last updated: 2026-04-25*
+*Last updated: 2026-04-25*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+
+- **과거 데이터와의 충돌:** 없음
+- **정책 변화:** 없음
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+
+## 💻 코드 패턴 (Code Patterns)
+
+**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
+
+```text
+# TODO
+```
+
+## 🤔 의사결정 기준 (Decision Criteria)
+
+**선택 A를 써야 할 때:**
+- *(TODO)*
+
+**선택 B를 써야 할 때:**
+- *(TODO)*
+
+**기본값:**
+> *(TODO)*
+
+## ❌ 안티패턴 (Anti-Patterns)
+
+- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*