Files

T

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

2026-05-08 19:52:07 +09:00

4.3 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, inferred_by, tech_stack

title

Web Rendering Strategies: CSR vs SSR (웹 렌더링 전략: CSR vs SSR)

📌 한 줄 통찰 (The Karpathy Summary)

"초기 로딩의 속도(SSR)와 인터랙션의 매끄러움(CSR) 사이에서 비즈니스 목적에 최적화된 지점을 선택하고, 하이브리드 접근법을 통해 검색 엔진과 사용자 모두를 만족시켜라" — 웹 애플리케이션의 성능, SEO, 사용자 경험을 결정짓는 핵심 아키텍처 선택 가이드.

📖 구조화된 지식 (Synthesized Content)

추출된 패턴: "Purpose-driven Rendering Allocation" — 검색 노출이 중요한 공용 페이지는 SSR로, 복잡한 상태 관리가 필요한 대시보드는 CSR로 할당하거나, 이를 혼합하여 사용하는 패턴.
렌더링 방식 비교:
- CSR (Client-Side Rendering): 브라우저에서 JS로 UI 구성. SPA에 적합하며 매끄러운 화면 전환 제공. 단, 초기 로드 속도가 느리고 SEO에 불리함.
- SSR (Server-Side Rendering): 서버에서 완성된 HTML 전송. 초기 LCP가 빠르고 SEO에 매우 유리함. 단, 서버 부하 증가 및 수화(Hydration) 지연 가능성 존재.
- SSG (Static Site Generation): 빌드 타임에 정적 파일 생성. 가장 빠른 성능 제공. 정적 마케팅 페이지에 최적.
핵심 지표 영향: SSR은 LCP(최대 콘텐츠 페인팅)를 개선하는 반면, CSR은 TTI(상호작용 시작 시간) 이후의 탐색 경험을 강화함.
의의: 기술적 제약을 넘어 비즈니스 수익(전환율)과 직결되는 최적의 렌더링 전략을 수립할 수 있게 함.

⚠️ 모순 및 업데이트 (Contradictions & Updates)

과거 데이터와의 충돌: 과거에는 CSR과 SSR 중 하나를 선택하는 이분법적 논리가 지배적이었으나, 현재 정책은 Next.js 등 프레임워크를 활용해 페이지/컴포넌트 단위로 렌더링 방식을 혼합하는 '하이브리드/아일랜드 아키텍처' 정책으로 진화함.
정책 변화: Antigravity 프로젝트는 모든 공용 콘텐츠에 대해 'SSR-First'를 원칙으로 하며, 인증된 영역에 한해 'CSR-Hydration' 전략을 부분적으로 허용함.

🔗 지식 연결 (Graph)

Core-Web-Vitals, Nextjs-App-Router-Architecture, Single-Page-Application-SPA, SEO-Foundations, Server-Side-Rendering-SSR
Raw Source: 00_Raw/Client-Side Rendering (CSR) vs 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: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

(TODO)

선택 B를 써야 할 때:

(TODO)

기본값:

(TODO)

❌ 안티패턴 (Anti-Patterns)

[안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)

4.3 KiB Raw Blame History