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

10_Wiki/Topics/Frontend/Server Side Rendering (SSR).md

@@ -1,10 +1,21 @@
 ---
-id: P-REINFORCE-AUTO-8F532C
-category: "10_Wiki/💡 Topics/Web Development"
+id: wiki-2026-0508-server-side-rendering-ssr
+title: Server Side Rendering (SSR)
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: [P-REINFORCE-AUTO-8F532C]
+duplicate_of: none
+source_trust_level: A
 confidence_score: 0.95
 tags: [auto-reinforced]
+raw_sources: []
 last_reinforced: 2026-05-03
 github_commit: "[P-Reinforce] Continuous Worker - Server Side Rendering (SSR)"
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
 ---
 
 # [[Server Side Rendering (SSR)|Server Side Rendering (SSR)]]
@@ -18,14 +29,13 @@ github_commit: "[P-Reinforce] Continuous Worker - Server Side Rendering (SSR)"
 * **React Server Components (RSC)와의 시너지:** SSR은 RSC(React Server Components)를 대체하는 것이 아니라 완벽하게 상호 보완하는 렌더링 기술입니다 [11, 12]. SSR은 초기 HTML을 생성하는 데 사용되며, RSC는 컴포넌트를 클라이언트 자바스크립트 번들에 포함시키지 않고 서버에서만 실행한 뒤 'RSC 페이로드'로 직렬화합니다 [3, 11, 13]. 두 기술을 결합하면 하이드레이션 단계가 생략되는 서버 컴포넌트의 이점과 초기 화면 로딩 속도를 높이는 SSR의 이점을 동시에 누릴 수 있습니다 [12, 14].
 * **Vue 3.5의 최적화 패턴:** 대규모 애플리케이션을 지원하기 위해 Vue 3.5는 뷰포트(Viewport) 내에 컴포넌트가 보일 때만 하이드레이션을 활성화하는 '지연 하이드레이션(Lazy Hydration)' 기능을 도입하여 초기 로드 시간을 획기적으로 줄였습니다 [15, 16]. 또한 `useId()` API를 도입해 서버와 클라이언트 렌더링 간에 일관된 고유 ID를 보장함으로써 하이드레이션 불일치(Mismatch) 현상을 방지합니다 [15, 17].
 
-## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
 * **하이드레이션 갭(Hydration Gap)과 'Two-Trip' 한계:** SSR은 초기 화면은 빠르게 보여주지만, 자바스크립트가 로드되어 하이드레이션이 끝날 때까지 사용자가 버튼을 눌러도 반응하지 않는 '하이드레이션 갭'이 발생합니다 [9, 10]. 또한 서버에서 렌더링을 마쳤음에도 불구하고, 클라이언트가 다시 자바스크립트를 다운로드하고 실행해야 하는 중복 작업(Two-Trip)이 여전히 남는다는 한계가 있습니다 [4].
 * **트리 블로킹(Tree Blocking):** 하이드레이션은 DOM 트리를 순차적으로 처리하므로, 트리 상단에 무겁고 느린 컴포넌트가 존재할 경우 트리 하단의 상호작용까지 지연되는 문제가 발생합니다 [10]. 이는 React 18의 사용자 상호작용을 먼저 처리하는 선택적 하이드레이션(Selective Hydration) 메커니즘을 통해 완화해야 합니다 [18].
 * **서버 환경에서의 상태 오염(State Pollution):** Vue 등에서 서버 사이드 렌더링을 구현할 때, 전역 스토어를 싱글톤(Singleton)으로 사용하면 여러 요청 간에 상태가 공유되어 데이터 유출 문제가 발생할 수 있습니다 [19, 20]. 따라서 요청마다 별도의 스토어(예: Pinia) 인스턴스가 생성되도록 엄격하게 아키텍처를 설계해야 합니다 [20].
 * **입력 유효성 검사 누락에 따른 보안 취약점:** SSR 환경에서 서버 액션을 내부 로컬 함수처럼 생각하여 입력값 검증을 생략할 경우, 누구나 요청을 보낼 수 있는 공용 HTTP 엔드포인트의 특성상 원격 코드 실행(RCE) 등의 치명적인 취약점(예: React2Shell)에 노출될 수 있습니다 [21, 22].
 
 ## 🔗 지식 연결 (Graph)
-
 ### Related Concepts
 
 #### [렌더링 전략 및 메커니즘]
@@ -71,3 +81,52 @@ github_commit: "[P-Reinforce] Continuous Worker - Server Side Rendering (SSR)"
 *Last updated: 2026-05-03*
 - Raw Source: 00_Raw/2026-05-03/Server Side Rendering (SSR).md
 ---
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## 🕓 변경 이력 (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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*