9148c358d0
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
2.9 KiB
2.9 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Progressive Hydration (점진적 하이드레이션) | 점진적 하이드레이션(Progressive Hydration)은 서버가 모든 데이터를 기다리지 않고 HTML 셸(shell)을 즉시 전송한 뒤, 데이터가 해결되는 대로 Suspense 경계를 스트리밍하는 기술입니다 [1]. | 2026-05-04 |
Progressive Hydration (점진적 하이드레이션)
📌 Brief Summary
점진적 하이드레이션(Progressive Hydration)은 서버가 모든 데이터를 기다리지 않고 HTML 셸(shell)을 즉시 전송한 뒤, 데이터가 해결되는 대로 Suspense 경계를 스트리밍하는 기술입니다 [1]. 클라이언트는 페이지의 나머지 부분이 여전히 다운로드되는 동안에도 이미 도착한 청크(chunk)들에 대해 먼저 하이드레이션을 시작할 수 있습니다 [1]. 이를 통해 가장 느린 데이터베이스 쿼리를 기다리느라 빈 화면이 노출되는 문제를 방지하고, 사용자에게 점진적인 로딩 경험을 제공합니다 [1].
📖 Core Content
- 청크 기반의 HTML 스트리밍: 점진적 하이드레이션은 데이터를 모두 기다렸다가 한 번에 전송하는 대신, 데이터를 여러 청크로 나누어 순차적(progressive)으로 전송합니다 [1, 2].
- Suspense 마커와 재시도 메커니즘: 내부적으로 이 기술은 Suspense 주석 노드 마커(
<!--$-->,<!--$!-->)와 재시도 콜백(retry callback) 메커니즘을 통해 스트리밍된 HTML을 처리하고 렌더링합니다 [2]. - 선택적 하이드레이션(Selective Hydration)과의 연계: React 18에서는 우선순위(Lanes) 시스템을 활용해 하이드레이션 과정을 일시 중단할 수 있습니다 [1]. 만약 하이드레이션이 완료되기 전에 사용자가 버튼을 클릭하면, React는 해당 상호작용 경계로 먼저 이동하여(SyncLane 활용) 상호작용을 처리할 수 있을 만큼만 먼저 하이드레이션한 뒤 나머지 트리의 작업을 재개합니다 [1].
⚖️ Trade-offs & Caveats
점진적 하이드레이션과 선택적 스트리밍 기술을 적용하더라도 기존 SSR(Server-Side Rendering) 구조가 가진 근본적인 한계 비용은 사라지지 않습니다 [3]. 하이드레이션이 수행되려면 결국 자바스크립트 코드가 클라이언트 기기로 전송(ship)되어야 하며, 모든 컴포넌트가 클라이언트 측에서 다시 실행(run)되어야 한다는 치명적인 제약이 따릅니다 [3]. 이러한 구조적 단점은 점진적 하이드레이션만으로는 해결할 수 없으며, 결국 클라이언트로 자바스크립트를 아예 보내지 않는 '서버 컴포넌트(Server Components)' 패러다임이 도입되는 계기가 되었습니다 [3].
Last updated: 2026-05-03