feat: massive wikification of styling systems and SaaS architecture

Processed 100+ files including Design Systems, CSS Architectures, and Enterprise Frontend strategies.

10_Wiki/Topics/Frontend_Mastery/React Server Components.md

@@ -1,19 +1,23 @@
 # [[React Server Components]]
 
 ## 📌 Brief Summary
-React Server Components(RSC)는 오직 서버 환경에서만 실행되고 클라이언트로 JavaScript 코드를 전혀 전송하지 않는 React의 렌더링 아키텍처입니다 [1-3]. 기존의 SSR(Server-Side Rendering)과 달리 브라우저에서의 하이드레이션(Hydration) 과정이 필요 없으며, 렌더링된 HTML과 직렬화된 UI 명령어만을 클라이언트에 전달하여 번들 크기를 0바이트로 만듭니다 [1-4]. 이를 통해 개발자는 서버 데이터베이스나 파일 시스템에 직접 접근할 수 있으면서도 클라이언트의 연산 부담을 획기적으로 줄일 수 있습니다 [5, 6].
+React Server Components(RSC)는 브라우저가 아닌 서버에서 실행되어 HTML을 스트리밍하는 방식의 컴포넌트입니다 [1]. 서버 컴포넌트 내에는 React 컨텍스트(Context)가 존재하지 않기 때문에, 런타임에 의존하는 기존의 CSS-in-JS 라이브러리(예: styled-components, Emotion)와 근본적으로 호환되지 않습니다 [1, 2]. 이러한 특성은 현대 프론트엔드 실무에서 유지보수성과 성능을 고려할 때 Tailwind CSS나 CSS Modules와 같은 Zero-runtime 스타일링 방식이 선호되도록 만드는 주요 원인이 되었습니다 [1, 3].
 
 ## 📖 Core Content
-*   **등장 배경 및 렌더링 패러다임의 변화:** 기존의 클라이언트 측 렌더링(CSR)과 서버 측 렌더링(SSR)은 최종적으로 브라우저가 방대한 JavaScript 번들을 다운로드하고 이를 실행하여 하이드레이션을 수행해야 하는 구조적 병목 현상이 있었습니다 [7-10]. RSC는 상호작용이 필요 없는 컴포넌트를 서버에서 전적으로 처리하게 함으로써 클라이언트 측 JavaScript를 40~60%가량 감소시키고 INP(Interaction to Next Paint) 성능을 향상시킵니다 [1, 10].
-*   **작동 방식 및 React Flight 프로토콜:** 서버 컴포넌트는 클라이언트로 JavaScript 코드를 보내지 않고, 정적 HTML과 함께 브라우저가 UI를 조합할 수 있도록 돕는 직렬화된 React 명령어(React Flight 프로토콜)를 전송합니다 [2, 3, 11]. 브라우저는 이를 받아 추가적인 스크립트 실행이나 하이드레이션 없이 화면을 구성할 수 있습니다 [4].
-*   **데이터 페칭(Data Fetching) 및 보안:** 서버 환경에서만 실행되므로 API 엔드포인트를 거칠 필요 없이 데이터베이스 쿼리를 직접 실행하거나 파일 시스템 및 서버 환경 변수(비밀키 등)에 안전하게 접근할 수 있습니다 [5, 6, 12]. 또한 별도의 Hook 없이 컴포넌트 내부에서 `async/await`를 직접 사용하여 데이터를 가져올 수 있어 불필요한 네트워크 왕복을 줄여줍니다 [13, 14].
-*   **Client Component와의 하이브리드 아키텍처:** React 19부터는 모든 컴포넌트가 기본적으로 Server Component로 동작합니다 [15]. `onClick`, `useState` 등의 브라우저 상호작용이나 상태 관리가 필요한 경우에만 파일 최상단에 `"use client"` 지시어를 선언하여 Client Component로 사용합니다 [5, 15, 16]. 이때 **Server Component는 Client Component를 렌더링할 수 있지만, Client Component는 Server Component를 직접 임포트할 수 없다**는 엄격한 단방향 의존성 규칙이 존재합니다 [15, 17, 18].
-*   **한계점 (Limitations):** 서버 컴포넌트 자체는 어떠한 브라우저 이벤트 핸들러나 브라우저 전용 API(`window`, `document` 등)도 사용할 수 없습니다 [6, 16, 19]. 또한 여전히 브라우저 환경을 가정하는 일부 서드파티 라이브러리와는 호환되지 않을 수 있으며, 복잡한 스트리밍 인프라가 필요하므로 규모가 작고 단순한 애플리케이션에서는 도입으로 인한 복잡성이 성능 이점을 능가할 수 있습니다 [19-21].
+* **동작 원리 및 CSS-in-JS와의 호환성 문제:**
+  React Server Components는 브라우저 환경이 아닌 서버에서 실행되므로 React Context를 사용할 수 없습니다 [1]. 따라서 styled-components나 Emotion처럼 React Context에 의존하여 런타임 시점에 CSS 문자열을 생성하고 주입하는 전통적인 CSS-in-JS 라이브러리들은 RSC와 근본적으로 호환되지 않거나 부분적인 호환성만 가집니다 [1, 2, 4].
+* **Next.js App Router 환경에서의 영향:**
+  Next.js의 App Router와 같은 환경에서는 확장성과 성능 지향적인 관행에 따라 Server Components의 사용이 우선시됩니다 [2, 5]. 이로 인해 RSC를 사용하는 최신 프로젝트에서는 런타임 기반 CSS-in-JS를 사용하는 것이 성능 병목 및 아키텍처 상의 큰 문제가 됩니다 [2].
+* **RSC 도입에 따른 실무 CSS 구조 설계 변화:**
+  이러한 RSC의 제약은 대규모 프론트엔드 프로젝트의 CSS 아키텍처 전략을 런타임 오버헤드가 없는(Zero-runtime) 방향으로 전환시켰습니다 [1].
+  * **Tailwind CSS:** 런타임이 전혀 없어 RSC와 완벽하게 호환되며 [1, 3], 최신 Next.js App Router 프로젝트에서 가장 권장되는 접근 방식 중 하나입니다 [6].
+  * **CSS Modules:** 빌드 타임에 정적 CSS를 생성하여 런타임 비용이 없으며 RSC와 완벽히 호환됩니다 [1, 3]. 복잡한 CSS를 직접 다뤄야 하는 팀에게 선호됩니다 [6].
+  * **vanilla-extract:** RSC 호환성 문제를 해결하기 위해 등장한 대안적 CSS-in-JS 솔루션으로, 빌드 타임에 정적 CSS를 생성하여 타입 안정성을 유지하면서도 RSC와 호환됩니다 [1, 3]. 
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client Components]], [[Hydration]], [[React Flight]], [[Concurrent Rendering]]
-- **Projects/Contexts:** [[Next.js App Router]], [[React 19]]
-- **Contradictions/Notes:** SSR은 초기 HTML을 서버에서 생성하여 빠르게 보여주지만 결국 컴포넌트를 동작시키기 위해 전체 JS 번들을 클라이언트에 보내고 하이드레이션(Hydration)해야 합니다. 반면, React Server Components는 브라우저에 JS 코드를 전혀 보내지 않고 하이드레이션 과정 자체를 생략한다는 점에서 SSR과 근본적으로 다릅니다 [3, 12, 22, 23]. 또한 모든 경우에 무조건적으로 더 빠른 것은 아니며, 높은 상호작용이 필요한 클라이언트 중심의 앱에서는 오버헤드가 발생할 수 있습니다 [20, 24].
+- **Related Topics:** [[CSS-in-JS]], [[Tailwind CSS]], [[CSS Modules]]
+- **Projects/Contexts:** [[Next.js App Router]]
+- **Contradictions/Notes:** 실무 CSS 설계에서 styled-components와 같은 런타임 CSS-in-JS는 동적 스타일링에 강력한 이점을 제공하지만, React Server Components가 도입된 아키텍처에서는 호환성 및 성능(SSR 복잡성) 문제로 인해 사용이 지양되며 CSS Modules나 Tailwind CSS로 대체되고 있습니다 [1, 2, 6].
 
 ---
-*Last updated: 2026-04-25*
+*Last updated: 2026-04-26*