docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,19 +1,19 @@
|
||||
# [[웹 렌더링 전략 (CSR, SSR, SSG, ISR)]]
|
||||
# [[웹 렌더링 전략 (CSR, SSR, SSG, ISR)|웹 렌더링 전략 (CSR, SSR, SSG, ISR]]
|
||||
|
||||
## 📌[[ brief]] Summary
|
||||
웹 렌더링 전략은 웹 애플리케이션의 HTML, CSS, [[JavaScript]] 코드를 브라우저가 화면에 표시하는 상호작용 가능한 형태(UI)로 변환하는 방식을 의미하며, 언제 어디서(클라이언트 혹은 서버) 렌더링을 수행할지에 대한 결정입니다 [1, 2]. 대표적인 방식으로 클라이언트 측에서 렌더링을 수행하는 CSR, 서버에서 HTML을 생성하는 SSR, 빌드 시점에 정적 파일을 생성하는 SSG, 그리고 이를 결합해 주기적으로 정적 페이지를 업데이트하는 ISR이 있습니다 [2-4]. 각 렌더링 전략은 초기 로드 속도, 검색 엔진 최적화(SEO), 상호작용 속도, 서버 부하 측면에서 명확한 장단점을 가지므로, 애플리케이션의 목적과 콘텐츠 업데이트 빈도에 따라 적절한 방식을 선택해야 합니다 [5-7].
|
||||
## 📌 Brief Summary
|
||||
웹 렌더링 전략은 웹 애플리케이션의 HTML, CSS, [[JavaScript|JavaScript]] 코드를 브라우저가 화면에 표시하는 상호작용 가능한 형태(UI)로 변환하는 방식을 의미하며, 언제 어디서(클라이언트 혹은 서버) 렌더링을 수행할지에 대한 결정입니다 [1, 2]. 대표적인 방식으로 클라이언트 측에서 렌더링을 수행하는 CSR, 서버에서 HTML을 생성하는 SSR, 빌드 시점에 정적 파일을 생성하는 SSG, 그리고 이를 결합해 주기적으로 정적 페이지를 업데이트하는 ISR이 있습니다 [2-4]. 각 렌더링 전략은 초기 로드 속도, 검색 엔진 최적화(SEO), 상호작용 속도, 서버 부하 측면에서 명확한 장단점을 가지므로, 애플리케이션의 목적과 콘텐츠 업데이트 빈도에 따라 적절한 방식을 선택해야 합니다 [5-7].
|
||||
|
||||
## 📖 Core 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]] 플랫폼, 사용자 인증이 필요한 고도의 상호작용 애플리케이션 [9, 11, 12, 22, 23].
|
||||
* 적합한 사용처: SEO가 중요하지 않은 내부 관리자 대시보드, [[SaaS|SaaS]] 플랫폼, 사용자 인증이 필요한 고도의 상호작용 애플리케이션 [9, 11, 12, 22, 23].
|
||||
|
||||
* **서버 사이드 렌더링 (SSR, Server-Side Rendering)**
|
||||
* 동작 원리: 사용자의 요청이 발생할 때마다 서버가 데이터를 가져와 완전하게 렌더링된 HTML 페이지를 생성하여 브라우저로 보냅니다 [24-28].
|
||||
* 장점: 브라우저가 완전한 HTML을 즉시 수신하므로 사용자가 콘텐츠를 빠르게 볼 수 있으며(빠른 첫 콘텐츠풀 페인트, FCP), 크롤러가 내용을 완벽하게 읽을 수 있어 SEO에 매우 유리합니다 [25, 28-32].
|
||||
* 단점: HTML이 표시된 후에도 JavaScript를 다운로드하여 이벤트 리스너를 연결하는 '하이드레이션([[Hydration]])' 과정이 끝나기 전까지는 페이지가 상호작용할 수 없어 대기 시간(TTI)이 길어질 수 있습니다 [25, 26, 33-35]. 매 요청마다 서버에서 렌더링을 처리해야 하므로 서버 리소스 소모가 큽니다 [25, 36-38].
|
||||
* 단점: HTML이 표시된 후에도 JavaScript를 다운로드하여 이벤트 리스너를 연결하는 '하이드레이션([[Hydration|Hydration]])' 과정이 끝나기 전까지는 페이지가 상호작용할 수 없어 대기 시간(TTI)이 길어질 수 있습니다 [25, 26, 33-35]. 매 요청마다 서버에서 렌더링을 처리해야 하므로 서버 리소스 소모가 큽니다 [25, 36-38].
|
||||
* 적합한 사용처: 항상 최신 데이터가 유지되어야 하며 SEO가 매우 중요한 뉴스 사이트, 전자상거래 제품 페이지 등 [28, 29, 39, 40].
|
||||
|
||||
* **정적 사이트 생성 (SSG, Static Site Generation)**
|
||||
@@ -29,8 +29,8 @@
|
||||
* 적합한 사용처: 방대한 카탈로그를 가진 대규모 전자상거래 플랫폼, 지속적인 최신화가 필요하지만 실시간 동기화까지는 불필요한 뉴스 포털 등 [4, 54, 56].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[하이드레이션 (Hydration)]], [[단일 페이지 애플리케이션 (SPA)]], [[검색 엔진 최적화 (SEO)]], [[Core Web Vitals]], 렌더 트리 ([[Render Tree]])
|
||||
- **Projects/Contexts:** [[Next.js]]의 하이브리드 렌더링 기능, 웹 성능 및 상호작용 최적화 프로젝트
|
||||
- **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].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user