chore: Clean up 00_Raw directory by moving processed files to 00_Processed

00_Raw/00_Processed/Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락.md

@@ -0,0 +1,19 @@
+# [[Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락]]
+
+## 📌 Brief Summary
+Next.js 및 React 애플리케이션의 렌더링 방식 최적화는 검색 엔진 최적화(SEO)와 Core Web Vitals 지표를 개선하기 위해 기존 클라이언트 측 렌더링(CSR)의 한계를 극복하는 과정이다 [1-3]. 기본 React 앱은 초기 로드 시 빈 HTML을 제공하므로, 서버 측 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR) 등의 방식을 활용하여 봇과 사용자에게 완성된 콘텐츠를 즉각적으로 제공한다 [4-6]. 이를 통해 페이지 로딩 속도를 단축하고 동적 인터랙션을 안정적으로 처리하여 전반적인 사용자 경험과 검색 엔진 순위를 향상시킨다 [3, 7, 8].
+
+## 📖 Core Content
+* **CSR의 한계와 최적화 필요성:** React의 기본 설정인 클라이언트 측 렌더링(CSR)은 브라우저가 자바스크립트를 다운로드하고 실행할 때까지 비어 있는 HTML 뼈대만 제공한다 [1, 4]. 이로 인해 검색 엔진 봇의 크롤링 지연(Two-wave indexing)과 렌더링 타임아웃을 유발할 수 있으며, 이는 결과적으로 검색 엔진 노출 저하와 높은 LCP(Largest Contentful Paint) 및 INP(Interaction to Next Paint) 지표로 이어진다 [2, 9-11].
+* **서버 측 렌더링(SSR) 도입:** Next.js와 같은 프레임워크를 활용한 SSR은 서버에서 각 요청에 대해 완전한 HTML을 생성하여 브라우저에 제공한다 [12, 13]. 자바스크립트 실행 없이도 봇이 즉각적으로 콘텐츠와 메타데이터, 구조화된 데이터를 크롤링할 수 있게 해주며 클라이언트 측의 렌더링 지연을 없애 LCP를 개선한다 [12, 14].
+* **정적 사이트 생성(SSG) 및 점진적 정적 재생성(ISR):** 블로그나 마케팅 페이지처럼 사용자 세션마다 내용이 변경되지 않는 경우, 빌드 시점에 HTML을 생성하는 SSG가 가장 빠르고 크롤링에 적합하다 [5, 6, 15]. 한편 전자상거래나 뉴스 사이트처럼 주기적으로 업데이트되는 콘텐츠는 ISR을 통해 SSG의 빠른 속도(캐시된 정적 페이지 제공)와 SSR의 최신성 유지(백그라운드 업데이트) 이점을 결합할 수 있다 [16, 17].
+* **하이드레이션(Hydration) 최적화:** SSR 이후 클라이언트에서 자바스크립트 이벤트가 연결되는 하이드레이션 과정은 페이지 상호작용 지연을 초래하여 INP 및 CLS 지표를 악화시킬 수 있다 [10]. 이를 해결하기 위해 React 18과 Next.js 환경에서는 상호작용이 필요한 컴포넌트만 부분적으로 하이드레이션(Partial Hydration)하거나 점진적 하이드레이션(Progressive Hydration), 스트리밍 SSR을 적용하여 메인 스레드 과부하를 방지한다 [18-20].
+* **코드 분할(Code Splitting) 및 지연 로딩(Lazy Loading):** 무거운 자바스크립트 번들을 최적화하기 위해 라우트 수준이나 컴포넌트 단위에서 `React.lazy()`와 `Suspense`를 사용해 코드를 분할한다 [21-24]. 이는 초기 로딩 번들 크기를 줄이고, 사용자가 필요한 시점에만 코드를 로드하게 하여 TTI(Time to Interactive) 및 전반적인 체감 성능을 향상시킨다 [25, 26].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Static Site Generation (SSG)]], [[Search Engine Optimization (SEO)]], [[Hydration]], [[Code Splitting]]
+- **Projects/Contexts:** [[Next.js Framework Optimization]], [[React Single Page Applications (SPA) SEO Migration]]
+- **Contradictions/Notes:** 동적 렌더링(Dynamic Rendering) 기술에 대해 일부 문맥에서는 봇을 위한 대안으로 소개하지만, 구글의 2026년 기준 입장은 SSR/SSG 적용이 불가능할 때만 사용하는 임시방편(workaround)으로 간주하며, 사람과 봇에게 다른 콘텐츠를 제공하는 클로킹(cloaking) 패널티 위험이 있어 사용을 권장하지 않는다 [27, 28].
+
+---
+*Last updated: 2026-04-26*