## ๐Ÿ“Œ Brief Summary React Server Components(RSC)๋Š” ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋˜์–ด ํด๋ผ์ด์–ธํŠธ๋กœ ์ „์†ก๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ํš๊ธฐ์ ์œผ๋กœ ์ค„์ด๋Š” ์„ฑ๋Šฅ ์ตœ์ ํ™” ์•„ํ‚คํ…์ฒ˜๋‹ค. ์ƒํ˜ธ์ž‘์šฉ์ด ์—†๋Š” ์ •์  UI๋Š” ์„œ๋ฒ„์—์„œ ์™„์ „ํžˆ ๋ Œ๋”๋งํ•˜๊ณ  ํ•„์š”ํ•œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋งŒ ๋ธŒ๋ผ์šฐ์ €๋กœ ์ „์†กํ•จ์œผ๋กœ์จ, ํ•˜์ด๋“œ๋ ˆ์ด์…˜ ๋น„์šฉ์„ ์ ˆ๊ฐํ•˜๊ณ  ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ทน๋Œ€ํ™”ํ•œ๋‹ค. ## ๐Ÿ“– Core Content 1. **์„œ๋ฒ„ ์‚ฌ์ด๋“œ ์ „์šฉ ๋ Œ๋”๋ง** - ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ํด๋ผ์ด์–ธํŠธ ๋ฒˆ๋“ค์— ํฌํ•จ๋˜์ง€ ์•Š์•„ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๊ฐ€ ์ค„์–ด๋“ค๊ณ  ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค/API์— ์ง์ ‘ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. 2. **๋ฒˆ๋“ค ๋ฐ ํ•˜์ด๋“œ๋ ˆ์ด์…˜ ์ตœ์ ํ™”** - ์ •์  UI๋ฅผ ์„œ๋ฒ„์—์„œ ๋ฏธ๋ฆฌ ๋ Œ๋”๋งํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์˜ JS ์‹คํ–‰ ๋น„์šฉ(TTI, Total Blocking Time)์„ ์ตœ์†Œํ™”ํ•œ๋‹ค. 3. **์ปดํฌ๋„ŒํŠธ ์กฐํ•ฉ ํŒจํ„ด** - `use client` ์ง€์‹œ์–ด๋ฅผ ํ†ตํ•ด ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š”ํ•œ ์˜์—ญ๋งŒ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์„ ํƒ์ ์œผ๋กœ ์ •์˜ํ•œ๋‹ค. - ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•˜๋˜, ์‚ฌ์šฉ์ž ์ธํ„ฐ๋ž™์…˜์ด ํ•„์š”ํ•œ ์ง€์ ์—์„œ๋งŒ ํด๋ผ์ด์–ธํŠธ ๊ฒฝ๊ณ„๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ๊ถŒ์žฅ๋œ๋‹ค. 4. **์ด์ค‘ ํŽ˜์นญ(Double Fetching) ํ•ด๊ฒฐ** - ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ๋ฐ›๋Š” ๋Œ€๊ธฐ ์‹œ๊ฐ„์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ์„œ๋ฒ„ ๋‚ด๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ง์ ‘ ํŽ˜์นญํ•˜์—ฌ ๋ Œ๋”๋ง์— ๋ฐ˜์˜ํ•œ๋‹ค. ## โš–๏ธ Trade-offs & Caveats - **ํ™˜๊ฒฝ ๋ฐ ๋„๊ตฌ ์ œ์•ฝ**: ํ˜„์žฌ ์ฃผ๋กœ Next.js App Router์™€ ๊ฐ™์€ ํŠน์ • ํ”„๋ ˆ์ž„์›Œํฌ ํ™˜๊ฒฝ์—์„œ๋งŒ ์•ˆ์ •์ ์œผ๋กœ ์ž‘๋™ํ•˜๋ฉฐ, ๊ธฐ์กด Pages Router์™€๋Š” ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š”๋‹ค. - **์ƒํƒœ ๋ฐ ํ›…์˜ ํ•œ๊ณ„**: ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ๋Š” `useState`, `useEffect` ๋“ฑ์˜ ํด๋ผ์ด์–ธํŠธ ์ „์šฉ ํ›…๊ณผ ๋ธŒ๋ผ์šฐ์ € API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. - **๊ตฌ์กฐ์  ๋ณต์žก์„ฑ**: ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ๊ฒฝ๊ณ„ ์„ค๊ณ„ ๋ฐ ๋ฐ์ดํ„ฐ ์ง๋ ฌํ™”(Serialization) ์ด์Šˆ๋ฅผ ๊ด€๋ฆฌํ•ด์•ผ ํ•˜๋Š” ์„ค๊ณ„์  ๋ถ€๋‹ด์ด ์กด์žฌํ•œ๋‹ค. ## ๐Ÿ”— Knowledge Connections ### Related Concepts (Auto-Linked) * [[Blocking]] * [[CSS-in-JS]] * [[Client Components]] * [[Code Splitting]] * [[Core_Web_Vitals]] * [[Edge_Computing]] * [[Hydration]] * [[Next.js]] * [[Next.js_App_Router]] * [[Optimization]] * [[React]] * [[Research]] * [[Server Components]] ### Related Concepts - **Next.js App Router**: RSC์˜ ํ‘œ์ค€ ๊ตฌํ˜„์ฒด (๊ด€๊ณ„: ๊ตฌ๋™ ํ™˜๊ฒฝ) - **Hydration**: RSC๋ฅผ ํ†ตํ•ด ๋น„์šฉ์„ ์ ˆ๊ฐํ•˜๊ณ ์ž ํ•˜๋Š” ๋Œ€์ƒ ๊ณผ์ • (๊ด€๊ณ„: ์ตœ์ ํ™” ๋ชฉํ‘œ) - **Client Components**: ์ƒํ˜ธ์ž‘์šฉ์„ ์œ„ํ•œ RSC์˜ ๋ณด์™„์žฌ (๊ด€๊ณ„: ์ƒํ˜ธ ์šด์šฉ ๊ด€๊ณ„) ### Deeper Research Questions 1. RSC์™€ ๊ธฐ์กด SSR(Server Side Rendering)์€ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋ฐฉ์‹๊ณผ ๋ฒˆ๋“ค๋ง ๋ฉ”์ปค๋‹ˆ์ฆ˜์—์„œ ๊ตฌ์ฒด์ ์œผ๋กœ ์–ด๋–ค ๊ธฐ์ˆ ์  ์ฐจ์ด๊ฐ€ ์žˆ๋Š”๊ฐ€? 2. ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฒฝ๊ณ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ Props๋กœ ๋„˜๊ธธ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” '์ง๋ ฌํ™” ๊ฐ€๋Šฅ์„ฑ' ์ œ์•ฝ ์กฐ๊ฑด์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ํŒจํ„ด์€? 3. RSC๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์„œ๋ฒ„ ๋ถ€ํ•˜๋ฅผ ์ œ์–ดํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹ฑํ•˜๊ธฐ ์œ„ํ•œ 'Request Memoization' ์ „๋žต์€? 4. ์„œ๋“œํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(์˜ˆ: CSS-in-JS, UI Kits)๊ฐ€ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํ™˜๊ฒฝ์„ ์ง€์›ํ•˜์ง€ ์•Š์„ ๋•Œ์˜ ์šฐํšŒ ๋ฐฉ๋ฒ•๋ก ์€? 5. RSC ํ™˜๊ฒฝ์—์„œ ๋ณด์•ˆ ๋ฏผ๊ฐ ์ •๋ณด(API Key ๋“ฑ)๊ฐ€ ํด๋ผ์ด์–ธํŠธ๋กœ ์œ ์ถœ๋˜์ง€ ์•Š๋„๋ก ๋ณด์žฅํ•˜๋Š” 'Server-only' ๋ชจ๋“ˆ ํ™œ์šฉ ๋ฐฉ์•ˆ์€? ### Practical Application Contexts - **๊ณ ์„ฑ๋Šฅ ์›น ์„œ๋น„์Šค ๊ตฌ์ถ•**: ๋Œ€๊ทœ๋ชจ ์ด์ปค๋จธ์Šค๋‚˜ ๋‰ด์Šค ๋ฏธ๋””์–ด ๊ฐ™์ด ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋น„์ฆˆ๋‹ˆ์Šค ์ง€ํ‘œ์— ์ง๊ฒฐ๋˜๋Š” ์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ. - **๋ฒˆ๋“ค ๋‹ค์ด์–ดํŠธ**: ๋ฌด๊ฑฐ์šด ์„œ๋“œํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„œ๋ฒ„ ์ธก์—์„œ๋งŒ ์‹คํ–‰ํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ์ž์‚ฐ ์ตœ์†Œํ™”. ### Adjacent Topics - **Code Splitting & Streaming SSR** - **Core Web Vitals Optimization** - **Edge Computing & Serverless Functions**