[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/Next.js를 활용한 SEO 및 성능 최적화 하이브리드 렌더링 아키텍처 설계.md

@@ -1,7 +1,7 @@
 # [[Next.js를 활용한 SEO 및 성능 최적화 하이브리드 렌더링 아키텍처 설계]]
 
-## 📌 Brief Summary
-Next.js를 활용한 하이브리드 렌더링 아키텍처 설계는 단일 애플리케이션 내에서 각 페이지와 컴포넌트의 특성에 맞춰 CSR, SSR, SSG, ISR 등 다양한 렌더링 방식을 혼합하여 사용하는 전략입니다 [1-3]. 검색 엔진 최적화(SEO)와 빠른 초기 로딩이 중요한 페이지에는 서버 사이드 렌더링(SSR)이나 정적 생성(SSG)을 적용하고, 동적인 상호작용이 필요한 영역에는 클라이언트 사이드 렌더링(CSR)을 배치하여 성능과 사용자 경험을 극대화할 수 있습니다 [1]. 또한, React Server Components(RSC)와 선택적 하이드레이션(Hydration) 기법을 결합하여 클라이언트로 전송되는 자바스크립트 번들 크기를 최소화하고 체감 성능을 향상시킬 수 있습니다 [4-7].
+## 📌[[ brief]] Summary
+[[Next.js]]를 활용한 하이브리드 렌더링 아키텍처 설계는 단일 애플리케이션 내에서 각 페이지와 컴포넌트의 특성에 맞춰 CSR, SSR, SSG, ISR 등 다양한 렌더링 방식을 혼합하여 사용하는 전략입니다 [1-3]. 검색 엔진 최적화(SEO)와 빠른 초기 로딩이 중요한 페이지에는 서버 사이드 렌더링(SSR)이나 정적 생성(SSG)을 적용하고, 동적인 상호작용이 필요한 영역에는 클라이언트 사이드 렌더링(CSR)을 배치하여 성능과 사용자 경험을 극대화할 수 있습니다 [1]. 또한, [[React Server Components]](RSC)와 선택적 하이드레이션([[Hydration]]) 기법을 결합하여 클라이언트로 전송되는 자바스크립트 번들 크기를 최소화하고 체감 성능을 향상시킬 수 있습니다 [4-7].
 
 ## 📖 Core Content
 *   **하이브리드 렌더링 전략의 필요성**
@@ -11,9 +11,9 @@ Next.js를 활용한 하이브리드 렌더링 아키텍처 설계는 단일 애
     *   **SSR (Server-Side Rendering):** 사용자가 페이지를 요청할 때마다 서버에서 데이터를 가져와 HTML을 렌더링하는 방식입니다 [8]. 초기 콘텐츠 표시 속도(FCP)가 빠르고 검색 엔진 크롤러가 완성된 HTML을 읽을 수 있어 SEO에 매우 유리하지만 [9-11], 서버 부하가 증가하고 자바스크립트 하이드레이션 과정으로 인해 상호작용 가능 시간(TTI)이 지연될 수 있다는 단점이 있습니다 [9, 12-14]. 뉴스 사이트나 전자상거래 제품 페이지에 이상적입니다 [15].
     *   **SSG (Static Site Generation):** 빌드 시점에 모든 HTML 페이지를 미리 생성하여 CDN을 통해 배포하므로 서버 사이드 연산 없이 가장 빠른 로딩 속도를 제공합니다 [16-19]. 블로그나 마케팅 페이지에 적합하며 완벽한 SEO를 보장하지만, 콘텐츠가 자주 변경되는 경우에는 한계가 있습니다 [16, 20-22].
     *   **ISR (Incremental Static Regeneration):** 전체 사이트를 다시 빌드할 필요 없이 백그라운드에서 설정된 간격으로 정적 페이지를 재생성합니다 [16, 23, 24]. SSG의 놀라운 속도와 SSR의 유연성을 결합하여 성능과 콘텐츠 최신화를 동시에 달성하므로, 대규모 전자상거래 플랫폼이나 대형 콘텐츠 사이트에 최적화된 방식입니다 [25, 26].
-    *   **CSR (Client-Side Rendering):** 브라우저가 최소한의 HTML을 받은 후 자바스크립트를 실행하여 UI를 동적으로 생성합니다 [27, 28]. 초기 로드 시간은 길고 SEO에 불리할 수 있으나, 페이지 로드 후에는 깜빡임 없는 부드러운 앱 전환(SPA)과 고도의 상호작용을 제공하므로 사용자 대시보드나 SaaS 플랫폼에 최적의 선택입니다 [29-31].
+    *   **CSR (Client-Side Rendering):** 브라우저가 최소한의 HTML을 받은 후 자바스크립트를 실행하여 UI를 동적으로 생성합니다 [27, 28]. 초기 로드 시간은 길고 SEO에 불리할 수 있으나, 페이지 로드 후에는 깜빡임 없는 부드러운 앱 전환(SPA)과 고도의 상호작용을 제공하므로 사용자 대시보드나 [[SaaS]] 플랫폼에 최적의 선택입니다 [29-31].
 
-*   **React Server Components (RSC)의 도입**
+*   **[[React [[Server Components]] (RSC)]]의 도입**
     RSC는 하이브리드 아키텍처를 컴포넌트 단위로 확장한 최신 기술입니다. 서버 컴포넌트는 오직 서버에서만 실행되며 브라우저로 전송되는 자바스크립트 번들에 0바이트를 기여합니다 [4, 5]. 데이터베이스나 파일 시스템에 직접 접근할 수 있고, 불필요한 클라이언트-API 간 네트워크 왕복을 제거합니다 [6, 32, 33]. 성능 최적화를 위해서는 데이터 집약적인 정적 영역을 서버 컴포넌트로 처리하고, 폼이나 버튼 같은 상호작용 요소만 "use client" 지시어를 사용해 클라이언트 컴포넌트로 감싸는 방식이 권장됩니다 [6, 34-36].
 
 *   **하이드레이션(Hydration) 병목 현상 해결**