[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,110 +2,199 @@
|
||||
id: wiki-2026-0508-웹-렌더링-전략-csr-ssr-ssg-isr
|
||||
title: "웹 렌더링 전략 (CSR, SSR, SSG, ISR)"
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Web Rendering Strategies, CSR vs SSR, Static Generation, Incremental Static Regeneration, RSC]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.93
|
||||
verification_status: applied
|
||||
tags: [frontend, rendering, ssr, ssg, csr, isr, rsc, nextjs]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: TypeScript
|
||||
framework: Next.js 15, Remix, Astro 5, Qwik
|
||||
---
|
||||
|
||||
# [[웹 렌더링 전략 (CSR, SSR, SSG, ISR)|웹 렌더링 전략 (CSR, SSR, SSG, ISR]]
|
||||
# 웹 렌더링 전략 (CSR, SSR, SSG, ISR)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
웹 렌더링 전략은 웹 애플리케이션의 HTML, CSS, [[JavaScript|JavaScript]] 코드를 브라우저가 화면에 표시하는 상호작용 가능한 형태(UI)로 변환하는 방식을 의미하며, 언제 어디서(클라이언트 혹은 서버) 렌더링을 수행할지에 대한 결정입니다 [1, 2]. 대표적인 방식으로 클라이언트 측에서 렌더링을 수행하는 CSR, 서버에서 HTML을 생성하는 SSR, 빌드 시점에 정적 파일을 생성하는 SSG, 그리고 이를 결합해 주기적으로 정적 페이지를 업데이트하는 ISR이 있습니다 [2-4]. 각 렌더링 전략은 초기 로드 속도, 검색 엔진 최적화(SEO), 상호작용 속도, 서버 부하 측면에서 명확한 장단점을 가지므로, 애플리케이션의 목적과 콘텐츠 업데이트 빈도에 따라 적절한 방식을 선택해야 합니다 [5-7].
|
||||
## 매 한 줄
|
||||
> **"매 페이지 마다 매 적절한 rendering 시점 의 선택 — 매 CSR / SSR / SSG / ISR / RSC 의 spectrum"**. 매 2010s SPA 의 CSR-only era 의 종료, 매 2020s Next.js 13+ App Router 의 RSC (React Server Components) 의 매 default 화. 매 2026 매 mix-and-match — 매 한 page 안 의 static shell + streaming SSR + island hydration 의 공존.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)**
|
||||
* 동작 원리: 서버는 뼈대만 있는 빈 HTML 파일과 애플리케이션 구동에 필요한 JavaScript 번들을 브라우저로 전송합니다 [8-11]. 이후 브라우저가 JavaScript를 다운로드하고 실행하여 동적으로 UI를 구축하고 필요한 데이터를 가져옵니다 [8-11].
|
||||
* 장점: 초기 로딩 이후에는 전체 페이지 새로고침 없이 빠른 전환이 가능하여 부드럽고 상호작용이 풍부한 앱과 같은 사용자 경험을 제공합니다 [8, 12-15]. 렌더링 부하를 클라이언트로 분산시켜 서버 부하가 낮습니다 [12, 15, 16].
|
||||
* 단점: JavaScript를 모두 다운로드하고 실행할 때까지 사용자는 빈 화면을 보게 되므로 초기 로드 속도(FCP 등)가 느립니다 [8, 12, 15, 17, 18]. 크롤러가 초기에 빈 화면을 마주하므로 검색 엔진 최적화(SEO)에 불리합니다 [8, 15, 19-21].
|
||||
* 적합한 사용처: SEO가 중요하지 않은 내부 관리자 대시보드, [[SaaS|SaaS]] 플랫폼, 사용자 인증이 필요한 고도의 상호작용 애플리케이션 [9, 11, 12, 22, 23].
|
||||
## 매 핵심
|
||||
|
||||
* **서버 사이드 렌더링 (SSR, Server-Side Rendering)**
|
||||
* 동작 원리: 사용자의 요청이 발생할 때마다 서버가 데이터를 가져와 완전하게 렌더링된 HTML 페이지를 생성하여 브라우저로 보냅니다 [24-28].
|
||||
* 장점: 브라우저가 완전한 HTML을 즉시 수신하므로 사용자가 콘텐츠를 빠르게 볼 수 있으며(빠른 첫 콘텐츠풀 페인트, FCP), 크롤러가 내용을 완벽하게 읽을 수 있어 SEO에 매우 유리합니다 [25, 28-32].
|
||||
* 단점: HTML이 표시된 후에도 JavaScript를 다운로드하여 이벤트 리스너를 연결하는 '하이드레이션([[Hydration|Hydration]])' 과정이 끝나기 전까지는 페이지가 상호작용할 수 없어 대기 시간(TTI)이 길어질 수 있습니다 [25, 26, 33-35]. 매 요청마다 서버에서 렌더링을 처리해야 하므로 서버 리소스 소모가 큽니다 [25, 36-38].
|
||||
* 적합한 사용처: 항상 최신 데이터가 유지되어야 하며 SEO가 매우 중요한 뉴스 사이트, 전자상거래 제품 페이지 등 [28, 29, 39, 40].
|
||||
### 매 Strategy Spectrum
|
||||
| 전략 | 매 HTML 생성 시점 | 매 JS hydration | 매 use case |
|
||||
|---|---|---|---|
|
||||
| **CSR** | 매 client runtime | 매 모든 것 | dashboard, internal tool |
|
||||
| **SSR** | 매 request time (server) | 매 full | dynamic personalized |
|
||||
| **SSG** | 매 build time | 매 full / partial | blog, docs, marketing |
|
||||
| **ISR** | 매 build + on-demand revalidate | 매 full / partial | e-commerce catalog |
|
||||
| **RSC** | 매 server (no client JS for component) | 매 client component 만 | 매 modern Next.js default |
|
||||
| **Streaming SSR** | 매 server, 매 chunk-by-chunk | 매 progressive | 매 large interactive page |
|
||||
|
||||
* **정적 사이트 생성 (SSG, Static Site Generation)**
|
||||
* 동작 원리: 사용자의 요청 시점이 아닌 애플리케이션의 '빌드(Build) 타임'에 미리 전체 HTML 페이지를 생성해 두고, 이를 콘텐츠 전송 네트워크(CDN)를 통해 제공합니다 [24, 38, 41-43].
|
||||
* 장점: 요청 시 서버에서의 추가 연산이 필요 없어 응답 속도가 압도적으로 빠르며 완벽한 SEO 성능을 제공합니다 [24, 41, 42, 44-46]. 정적 파일만 제공하므로 호스팅 비용이 저렴하고 확장성과 보안이 뛰어납니다 [16, 46-48].
|
||||
* 단점: 콘텐츠가 변경되면 사이트 전체를 다시 빌드하고 배포해야 하므로, 실시간으로 데이터가 변하거나 개인화된 콘텐츠를 보여주기에는 한계가 있습니다 [46, 47, 49].
|
||||
* 적합한 사용처: 내용이 자주 바뀌지 않는 공식 문서, 마케팅 랜딩 페이지, 기술 블로그 등 [24, 42, 46, 50].
|
||||
### 매 Trade-off
|
||||
- **CSR** — 매 TTI (Time-to-Interactive) 의 빠름 (after JS load), 매 FCP 의 느림, 매 SEO 의 약함.
|
||||
- **SSR** — 매 FCP 의 빠름, 매 TTFB 의 느림 (server compute), 매 cache 의 어려움.
|
||||
- **SSG** — 매 가장 빠른 TTFB, 매 CDN 의 무한 scale, 매 stale 의 risk.
|
||||
- **ISR** — SSG 의 stale 의 해결, 매 first request 의 stale 의 가능.
|
||||
- **RSC** — 매 client bundle 의 축소, 매 framework lock-in.
|
||||
|
||||
* **점진적 정적 재생성 (ISR, Incremental Static Regeneration)**
|
||||
* 동작 원리: SSG처럼 미리 빌드된 정적 페이지를 제공하지만, 설정된 일정 시간(예: 60초)이 지나거나 콘텐츠가 변경되었을 때 전체 사이트 재빌드 없이 백그라운드에서 개별 페이지 단위로 재생성 및 업데이트를 수행합니다 [4, 24, 41, 47, 51].
|
||||
* 장점: SSG의 초고속 성능(CDN 캐싱)을 누리면서도 SSR처럼 최신 데이터를 반영할 수 있는 강력한 하이브리드 성능을 제공합니다 [41, 52, 53]. 대규모 사이트에서도 빌드 시간의 부담 없이 확장할 수 있습니다 [53, 54].
|
||||
* 단점: 재검증 과정이나 백그라운드 재생성 설정 등 구성의 복잡성이 따르며, 재생성 주기 도중에는 일시적으로 예전 데이터(Stale data)가 노출될 위험이 존재합니다 [53, 55].
|
||||
* 적합한 사용처: 방대한 카탈로그를 가진 대규모 전자상거래 플랫폼, 지속적인 최신화가 필요하지만 실시간 동기화까지는 불필요한 뉴스 포털 등 [4, 54, 56].
|
||||
### 매 RSC (React Server Components) 의 의미
|
||||
- 매 component tree 의 server / client 의 split.
|
||||
- Server component — 매 DB 의 직접 fetch, 매 secret 의 access, 매 client JS 의 X.
|
||||
- Client component — `'use client'` 의 마킹, 매 useState/useEffect 의 사용.
|
||||
- 매 server payload 의 binary serialization (RSC wire format).
|
||||
|
||||
## 🔗 지식 연결 (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*
|
||||
### Pattern 1: Next.js 15 Server Component (default)
|
||||
```tsx
|
||||
// app/posts/page.tsx — 매 server 의 실행, 매 client JS 의 X
|
||||
import { db } from '@/lib/db';
|
||||
|
||||
## 🤖 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
|
||||
export default async function PostsPage() {
|
||||
const posts = await db.posts.findMany({ orderBy: { createdAt: 'desc' } });
|
||||
return (
|
||||
<ul>
|
||||
{posts.map(p => <li key={p.id}>{p.title}</li>)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Pattern 2: Client Component (interactivity)
|
||||
```tsx
|
||||
'use client';
|
||||
import { useState } from 'react';
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
export function LikeButton({ postId }: { postId: string }) {
|
||||
const [liked, setLiked] = useState(false);
|
||||
return (
|
||||
<button onClick={() => setLiked(!liked)}>
|
||||
{liked ? '♥' : '♡'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Pattern 3: Static Generation (SSG)
|
||||
```tsx
|
||||
// app/blog/[slug]/page.tsx
|
||||
export async function generateStaticParams() {
|
||||
const posts = await getAllPosts();
|
||||
return posts.map(p => ({ slug: p.slug }));
|
||||
}
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
export default async function PostPage({ params }: { params: { slug: string } }) {
|
||||
const post = await getPost(params.slug);
|
||||
return <Article post={post} />;
|
||||
}
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### Pattern 4: ISR (Incremental Static Regeneration)
|
||||
```tsx
|
||||
// app/products/[id]/page.tsx
|
||||
export const revalidate = 3600; // 매 1시간 마다 background revalidate
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
export default async function ProductPage({ params }) {
|
||||
const product = await fetchProduct(params.id);
|
||||
return <ProductDetail product={product} />;
|
||||
}
|
||||
|
||||
// 매 on-demand revalidation
|
||||
import { revalidatePath } from 'next/cache';
|
||||
export async function POST(req: Request) {
|
||||
const { path } = await req.json();
|
||||
revalidatePath(path);
|
||||
return Response.json({ revalidated: true });
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 5: Streaming SSR with Suspense
|
||||
```tsx
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<>
|
||||
<Header /> {/* 매 즉시 stream */}
|
||||
<Suspense fallback={<Skeleton />}>
|
||||
<SlowAnalytics /> {/* 매 chunk 의 도착 시 stream */}
|
||||
</Suspense>
|
||||
<Suspense fallback={<Skeleton />}>
|
||||
<SlowFeed />
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 6: Astro 5 Islands
|
||||
```astro
|
||||
---
|
||||
// 매 build-time 의 server, 매 client JS 의 zero by default
|
||||
import Counter from './Counter.tsx';
|
||||
const posts = await Astro.glob('./posts/*.md');
|
||||
---
|
||||
<html>
|
||||
<body>
|
||||
<h1>Blog</h1>
|
||||
{posts.map(p => <article>{p.frontmatter.title}</article>)}
|
||||
<Counter client:visible /> {/* 매 viewport 의 진입 시 hydrate */}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Pattern 7: Edge Runtime (SSR at edge)
|
||||
```tsx
|
||||
// app/api/geo/route.ts
|
||||
export const runtime = 'edge';
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const country = req.headers.get('x-vercel-ip-country') ?? 'US';
|
||||
return Response.json({ country });
|
||||
}
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | 전략 |
|
||||
|---|---|
|
||||
| Marketing / docs site | SSG (Astro, Next.js) |
|
||||
| E-commerce catalog | ISR (revalidate=3600) |
|
||||
| Personalized feed | SSR + RSC |
|
||||
| Real-time dashboard | CSR + SWR/React Query |
|
||||
| Hybrid (static shell + dynamic island) | RSC + Client Components |
|
||||
| Geo-aware routing | Edge SSR |
|
||||
| SEO + interactivity | Streaming SSR with Suspense |
|
||||
|
||||
**기본값**: 매 Next.js 15 App Router — RSC default, Suspense streaming, ISR `revalidate` 의 사용.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Frontend Performance Optimization (FE 성능 최적화)]] · [[React]]
|
||||
- 변형: [[Server Side Rendering, SSR]] · [[Static Site Generation (SSG)]] · [[Incremental Static Regeneration (ISR)]] · [[Server Components]]
|
||||
- 응용: [[Next.js]] · [[Remix]] · [[Astro]]
|
||||
- Adjacent: [[Edge Computing]] · [[CDN]] · [[Hydration]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 page 의 적절한 rendering strategy 의 권고, RSC server/client boundary 의 review, `revalidate` 의 적절한 시간 의 제안.
|
||||
**언제 X**: 매 specific framework migration 의 detailed plan — 매 codebase 의 scan 의 X.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **모든 페이지 의 SSR**: 매 cold-start latency, 매 cost 의 polynomial 증가.
|
||||
- **CSR 의 SEO-critical page**: 매 GoogleBot 의 partial 만 render → 매 ranking 손실.
|
||||
- **Server Component 의 useState**: 매 build error.
|
||||
- **Client Component 의 DB query**: 매 client 의 secret leak.
|
||||
- **ISR 의 revalidate=1**: 매 cache 의 의미 X — 매 SSR 의 사용.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Next.js 15 docs, React Server Components RFC, Patterns.dev: rendering patterns 2026).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — full spectrum (CSR/SSR/SSG/ISR/RSC), Next.js 15 patterns, decision matrix |
|
||||
|
||||
Reference in New Issue
Block a user