diff --git a/Aug/article/Server-Component.md b/Aug/article/Server-Component.md new file mode 100644 index 0000000..45cd5a2 --- /dev/null +++ b/Aug/article/Server-Component.md @@ -0,0 +1,122 @@ +## ๐Ÿ”— [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) + +### ๐Ÿ—“๏ธ ๋ฒˆ์—ญ ๋‚ ์งœ: 2024.08.04 + +### ๐Ÿงš ๋ฒˆ์—ญํ•œ ํฌ๋ฃจ: ๋Ÿฌ๊ธฐ(๋ฐ•์ •์šฐ) + +--- + +## ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ + +React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์„œ๋ฒ„์—์„œ UI๋ฅผ ๋ Œ๋”๋งํ•˜๊ณ  ์„ ํƒ์ ์œผ๋กœ ์บ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Next.js์—์„œ๋Š” ๋ผ์šฐํŠธ ์„ธ๊ทธ๋จผํŠธ์— ๋”ฐ๋ผ ๋ Œ๋”๋ง ์ž‘์—…์„ ๋ถ„ํ• ํ•˜์—ฌ ์ŠคํŠธ๋ฆฌ๋ฐ ๋ฐ ๋ถ€๋ถ„ ๋ Œ๋”๋ง์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋ฉฐ, ์„ธ ๊ฐ€์ง€ ์„œ๋ฒ„ ๋ Œ๋”๋ง ์ „๋žต์ด ์žˆ์Šต๋‹ˆ๋‹ค: + +- ์ •์  ๋ Œ๋”๋ง +- ๋™์  ๋ Œ๋”๋ง +- ์ŠคํŠธ๋ฆฌ๋ฐ + +์ด ํŽ˜์ด์ง€์—์„œ๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์˜ ์ž‘๋™ ๋ฐฉ์‹, ์‚ฌ์šฉ ์‹œ๊ธฐ, ๋‹ค์–‘ํ•œ ์„œ๋ฒ„ ๋ Œ๋”๋ง ์ „๋žต์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. + +## ์„œ๋ฒ„ ๋ Œ๋”๋ง์˜ ์ด์  + +์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช‡ ๊ฐ€์ง€ ์ด์ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค: + +- **๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ**: ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ์ดํ„ฐ ์†Œ์Šค์— ๊ฐ€๊นŒ์šด ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ Œ๋”๋ง์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ์—์„œ ์š”์ฒญํ•ด์•ผ ํ•˜๋Š” ํšŸ์ˆ˜๋ฅผ ์ค„์—ฌ ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- **๋ณด์•ˆ**: ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ† ํฐ์ด๋‚˜ API ํ‚ค์™€ ๊ฐ™์€ ๋ฏผ๊ฐํ•œ ๋ฐ์ดํ„ฐ์™€ ๋กœ์ง์„ ํด๋ผ์ด์–ธํŠธ์— ๋…ธ์ถœ์‹œํ‚ค์ง€ ์•Š๊ณ  ์„œ๋ฒ„์— ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- **์บ์‹ฑ**: ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋งํ•˜๋ฉด ๊ฒฐ๊ณผ๋ฅผ ์บ์‹œํ•˜๊ณ  ์ดํ›„ ์š”์ฒญ ๋ฐ ์‚ฌ์šฉ์ž ๊ฐ„์— ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ณ  ๊ฐ ์š”์ฒญ๋งˆ๋‹ค ๋ Œ๋”๋ง ๋ฐ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์ค„์—ฌ ๋น„์šฉ์„ ์ ˆ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- **์„ฑ๋Šฅ**: ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ๋ณธ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” ์ถ”๊ฐ€ ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์™„์ „ํžˆ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ตฌ์„ฑ๋œ ์•ฑ์—์„œ ์ƒํ˜ธ์ž‘์šฉ์ด ์—†๋Š” UI ๋ถ€๋ถ„์„ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋™ํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ ์ธก JavaScript ์–‘์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋Š๋ฆฐ ์ธํ„ฐ๋„ท์ด๋‚˜ ์„ฑ๋Šฅ์ด ๋‚ฎ์€ ์žฅ์น˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. +- **์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋“œ ๋ฐ ์ฒซ ๋ฒˆ์งธ ์ฝ˜ํ…์ธ  ํŽ˜์ธํŠธ(FCP)**: ์„œ๋ฒ„์—์„œ HTML์„ ์ƒ์„ฑํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ์ฆ‰์‹œ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ JavaScript๋ฅผ ๋‹ค์šด๋กœ๋“œ, ํŒŒ์‹ฑ, ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์„ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. +- **๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO) ๋ฐ ์†Œ์…œ ๋„คํŠธ์›Œํฌ ๊ณต์œ  ๊ฐ€๋Šฅ์„ฑ**: ๋ Œ๋”๋ง๋œ HTML์€ ๊ฒ€์ƒ‰ ์—”์ง„ ๋ด‡์ด ํŽ˜์ด์ง€๋ฅผ ์ธ๋ฑ์‹ฑํ•˜๊ณ  ์†Œ์…œ ๋„คํŠธ์›Œํฌ ๋ด‡์ด ํŽ˜์ด์ง€์˜ ์†Œ์…œ ์นด๋“œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- **์ŠคํŠธ๋ฆฌ๋ฐ**: ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ Œ๋”๋ง ์ž‘์—…์„ ์ฒญํฌ๋กœ ๋ถ„ํ• ํ•˜๊ณ  ์ค€๋น„๋˜๋Š” ๋Œ€๋กœ ํด๋ผ์ด์–ธํŠธ์— ์ŠคํŠธ๋ฆฌ๋ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ „์ฒด ํŽ˜์ด์ง€๊ฐ€ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋ฅผ ๋จผ์ € ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +## Next.js์—์„œ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ + +๊ธฐ๋ณธ์ ์œผ๋กœ Next.js๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ถ”๊ฐ€์ ์ธ ์„ค์ • ์—†์ด ์ž๋™์œผ๋กœ ์„œ๋ฒ„ ๋ Œ๋”๋ง์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ•„์š”ํ•  ๋•Œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +--- + +## ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ์–ด๋–ป๊ฒŒ ๋ Œ๋”๋ง๋˜๋‚˜์š”? + +์„œ๋ฒ„์—์„œ Next.js๋Š” React์˜ API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋ง์„ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ๋ Œ๋”๋ง ์ž‘์—…์€ ๊ฐœ๋ณ„ ๋ผ์šฐํŠธ ์„ธ๊ทธ๋จผํŠธ ๋ฐ ์„œ์ŠคํŽœ์Šค ๊ฒฝ๊ณ„๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ฒญํฌ๋กœ ๋ถ„ํ• ๋ฉ๋‹ˆ๋‹ค. + +๊ฐ ์ฒญํฌ๋Š” ๋‘ ๋‹จ๊ณ„๋กœ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค: + +1. React๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํŠน์ˆ˜ ๋ฐ์ดํ„ฐ ํ˜•์‹์ธ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํŽ˜์ด๋กœ๋“œ(RSC Payload)๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. +2. Next.js๋Š” RSC ํŽ˜์ด๋กœ๋“œ์™€ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ JavaScript ์ง€์นจ์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„์—์„œ HTML์„ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. + +๊ทธ๋Ÿฐ ๋‹ค์Œ ํด๋ผ์ด์–ธํŠธ์—์„œ๋Š”: + +1. HTML์„ ์‚ฌ์šฉํ•˜์—ฌ ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ ๋น ๋ฅด๊ณ  ๋น„์ƒํ˜ธ์ž‘์šฉ์ ์ธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ฆ‰์‹œ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. +2. React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํŽ˜์ด๋กœ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ์กฐ์ •ํ•˜๊ณ  DOM์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค. +3. hydrate๋ฅผ ์œ„ํ•ด JavaScript ์ง€์นจ์„ ์‚ฌ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒํ˜ธ์ž‘์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. + +### React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํŽ˜์ด๋กœ๋“œ(RSC)๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”? + +RSC ํŽ˜์ด๋กœ๋“œ๋Š” ๋ Œ๋”๋ง๋œ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์˜ ๊ฐ„๊ฒฐํ•œ ๋ฐ”์ด๋„ˆ๋ฆฌ ํ‘œํ˜„์ž…๋‹ˆ๋‹ค. ์ด๋Š” ํด๋ผ์ด์–ธํŠธ์—์„œ React๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์˜ DOM์„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. RSC ํŽ˜์ด๋กœ๋“œ๋Š” ๋‹ค์Œ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค: + +- ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ Œ๋”๋ง๋œ ๊ฒฐ๊ณผ +- ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋  ์ž๋ฆฌ ํ‘œ์‹œ์ž ๋ฐ ํ•ด๋‹น JavaScript ํŒŒ์ผ์— ๋Œ€ํ•œ ์ฐธ์กฐ +- ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌ๋œ ๋ชจ๋“  props + +## ์„œ๋ฒ„ ๋ Œ๋”๋ง ์ „๋žต + +์„œ๋ฒ„ ๋ Œ๋”๋ง์—๋Š” ์„ธ ๊ฐ€์ง€ ํ•˜์œ„ ์ง‘ํ•ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค: ์ •์ , ๋™์  ๋ฐ ์ŠคํŠธ๋ฆฌ๋ฐ. + +### ์ •์  ๋ Œ๋”๋ง (๊ธฐ๋ณธ๊ฐ’) + +์ •์  ๋ Œ๋”๋ง์—์„œ๋Š” ๋ผ์šฐํŠธ๊ฐ€ ๋นŒ๋“œ ์‹œ ๋˜๋Š” ๋ฐ์ดํ„ฐ ์žฌ๊ฒ€์ฆ ํ›„ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๋Š” ์บ์‹œ๋˜์–ด ์ฝ˜ํ…์ธ  ์ „๋‹ฌ ๋„คํŠธ์›Œํฌ(CDN)์— ํ‘ธ์‹œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ตœ์ ํ™”๋Š” ๋ Œ๋”๋ง ์ž‘์—…์˜ ๊ฒฐ๊ณผ๋ฅผ ์‚ฌ์šฉ์ž ๋ฐ ์„œ๋ฒ„ ์š”์ฒญ ๊ฐ„์— ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. + +์ •์  ๋ Œ๋”๋ง์€ ๋ผ์šฐํŠธ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฐœ์ธํ™”๋˜์ง€ ์•Š๊ณ  ๋นŒ๋“œ ์‹œ ์•Œ ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์ •์  ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์ด๋‚˜ ์ œํ’ˆ ํŽ˜์ด์ง€ ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. + +### ๋™์  ๋ Œ๋”๋ง + +๋™์  ๋ Œ๋”๋ง์—์„œ๋Š” ๋ผ์šฐํŠธ๊ฐ€ ์š”์ฒญ ์‹œ๋งˆ๋‹ค ์‚ฌ์šฉ์ž์—๊ฒŒ ๋งž์ถฐ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. ๋™์  ๋ Œ๋”๋ง์€ ์ฟ ํ‚ค๋‚˜ URL์˜ ๊ฒ€์ƒ‰ ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ๊ฐ™์€ ์š”์ฒญ ์‹œ์—๋งŒ ์•Œ ์ˆ˜ ์žˆ๋Š” ์ •๋ณด๋ฅผ ํฌํ•จํ•˜๋Š” ๋ผ์šฐํŠธ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. + +### ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š” ๋™์  ๋ผ์šฐํŠธ + +๋Œ€๋ถ€๋ถ„์˜ ์›น์‚ฌ์ดํŠธ์—์„œ ๋ผ์šฐํŠธ๋Š” ์™„์ „ํžˆ ์ •์ ์ด๊ฑฐ๋‚˜ ์™„์ „ํžˆ ๋™์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฐ„๊ฒฉ๋งˆ๋‹ค ์žฌ๊ฒ€์ฆ๋˜๋Š” ์บ์‹œ๋œ ์ œํ’ˆ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ „์ž ์ƒ๊ฑฐ๋ž˜ ํŽ˜์ด์ง€๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์ง€๋งŒ, ์บ์‹œ๋˜์ง€ ์•Š์€ ๊ฐœ์ธํ™”๋œ ๊ณ ๊ฐ ๋ฐ์ดํ„ฐ๋„ ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +Next.js์—์„œ๋Š” ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ์™€ ์บ์‹œ๋˜์ง€ ์•Š์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ํฌํ•จํ•˜๋Š” ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋œ ๋ผ์šฐํŠธ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” RSC ํŽ˜์ด๋กœ๋“œ์™€ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ„๋„๋กœ ์บ์‹œ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญ ์‹œ ๊ฐ€์ ธ์˜ค๋Š” ์„ฑ๋Šฅ ๋ฌธ์ œ ์—†์ด ๋™์  ๋ Œ๋”๋ง์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +์ „์ฒด ๋ผ์šฐํŠธ ์บ์‹œ ๋ฐ ๋ฐ์ดํ„ฐ ์บ์‹œ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”. + +[Building Your Application: Caching - full route cache](https://nextjs.org/docs/app/building-your-application/caching#full-route-cache) + +[Building Your Application: Caching - data cache](https://nextjs.org/docs/app/building-your-application/caching#data-cache) + +### ๋™์  ๋ Œ๋”๋ง์œผ๋กœ ์ „ํ™˜ + +๋ Œ๋”๋ง ์ค‘์— ๋™์  ํ•จ์ˆ˜๋‚˜ ์บ์‹œ๋˜์ง€ ์•Š์€ ๋ฐ์ดํ„ฐ ์š”์ฒญ์ด ๋ฐœ๊ฒฌ๋˜๋ฉด Next.js๋Š” ์ „์ฒด ๋ผ์šฐํŠธ๋ฅผ ๋™์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋„๋ก ์ „ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ด ํ‘œ๋Š” ๋™์  ํ•จ์ˆ˜์™€ ๋ฐ์ดํ„ฐ ์บ์‹ฑ์ด ๋ผ์šฐํŠธ์˜ ์ •์  ๋˜๋Š” ๋™์  ๋ Œ๋”๋ง ์—ฌ๋ถ€์— ์–ด๋–ป๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š”์ง€ ์š”์•ฝํ•ฉ๋‹ˆ๋‹ค: + +| ๋™์  ํ•จ์ˆ˜ | ๋ฐ์ดํ„ฐ | ๋ผ์šฐํŠธ | +| --------- | ------------- | ----------------- | +| ์•„๋‹ˆ์š” | ์บ์‹œ๋จ | ์ •์ ์œผ๋กœ ๋ Œ๋”๋ง๋จ | +| ์˜ˆ | ์บ์‹œ๋จ | ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋จ | +| ์•„๋‹ˆ์š” | ์บ์‹œ๋˜์ง€ ์•Š์Œ | ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋จ | +| ์˜ˆ | ์บ์‹œ๋˜์ง€ ์•Š์Œ | ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋จ | + +์œ„์˜ ํ‘œ์—์„œ, ๋ผ์šฐํŠธ๊ฐ€ ์™„์ „ํžˆ ์ •์ ์ด ๋˜๋ ค๋ฉด ๋ชจ๋“  ๋ฐ์ดํ„ฐ๊ฐ€ ์บ์‹œ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ์™€ ์บ์‹œ๋˜์ง€ ์•Š์€ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜๋Š” ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋œ ๋ผ์šฐํŠธ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +๊ฐœ๋ฐœ์ž๋กœ์„œ ์ •์  ๋ Œ๋”๋ง๊ณผ ๋™์  ๋ Œ๋”๋ง์„ ์„ ํƒํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. Next.js๋Š” ์‚ฌ์šฉ๋œ ๊ธฐ๋Šฅ๊ณผ API์— ๋”ฐ๋ผ ๊ฐ ๋ผ์šฐํŠธ์— ์ตœ์ ์˜ ๋ Œ๋”๋ง ์ „๋žต์„ ์ž๋™์œผ๋กœ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์‹  ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹œํ•˜๊ฑฐ๋‚˜ ์žฌ๊ฒ€์ฆํ•  ๋•Œ์™€ UI์˜ ์ผ๋ถ€๋ฅผ ์ŠคํŠธ๋ฆฌ๋ฐํ•  ๋•Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. + +### ๋™์  ํ•จ์ˆ˜ + +๋™์  ํ•จ์ˆ˜๋Š” ์š”์ฒญ ์‹œ์—๋งŒ ์•Œ ์ˆ˜ ์žˆ๋Š” ์ •๋ณด(์˜ˆ: ์‚ฌ์šฉ์ž์˜ ์ฟ ํ‚ค, ํ˜„์žฌ ์š”์ฒญ ํ—ค๋” ๋˜๋Š” URL์˜ ๊ฒ€์ƒ‰ ๋งค๊ฐœ๋ณ€์ˆ˜)์— ์˜์กดํ•ฉ๋‹ˆ๋‹ค. Next.js์—์„œ ์ด๋Ÿฌํ•œ ๋™์  ํ•จ์ˆ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค: + +- `cookies()`์™€ `headers()`: ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ „์ฒด ๋ผ์šฐํŠธ๊ฐ€ ์š”์ฒญ ์‹œ์— ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. +- `searchParams`: ํŽ˜์ด์ง€์—์„œ `searchParams` prop์„ ์‚ฌ์šฉํ•˜๋ฉด ํŽ˜์ด์ง€๊ฐ€ ์š”์ฒญ ์‹œ์— ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. + +์ด๋“ค ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ „์ฒด ๋ผ์šฐํŠธ๊ฐ€ ์š”์ฒญ ์‹œ์— ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. + +### ์ŠคํŠธ๋ฆฌ๋ฐ + +![streaming](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fsequential-parallel-data-fetching.png&w=3840&q=75) + +์ŠคํŠธ๋ฆฌ๋ฐ์€ ์„œ๋ฒ„์—์„œ UI๋ฅผ ์ ์ง„์ ์œผ๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ์ž‘์—…์€ ์ฒญํฌ๋กœ ๋ถ„ํ• ๋˜๊ณ  ์ค€๋น„๋˜๋Š” ๋Œ€๋กœ ํด๋ผ์ด์–ธํŠธ์— ์ŠคํŠธ๋ฆฌ๋ฐ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ „์ฒด ์ฝ˜ํ…์ธ ๊ฐ€ ๋ Œ๋”๋ง๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋ฅผ ์ฆ‰์‹œ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +![streaming2](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fserver-rendering-with-streaming.png&w=3840&q=75) + +์ŠคํŠธ๋ฆฌ๋ฐ์€ Next.js App Router์— ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‚ด์žฅ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ , ์ „์ฒด ๋ผ์šฐํŠธ ๋ Œ๋”๋ง์„ ์ฐจ๋‹จํ•  ๋Š๋ฆฐ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ์— ์˜์กดํ•˜๋Š” UI๋ฅผ ๊ฐœ์„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ œํ’ˆ ํŽ˜์ด์ง€์˜ ๋ฆฌ๋ทฐ๊ฐ€ ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. + +๋ผ์šฐํŠธ ์„ธ๊ทธ๋จผํŠธ๋ฅผ ์ŠคํŠธ๋ฆฌ๋ฐํ•˜๋ ค๋ฉด `loading.js`์™€ React ์„œ์ŠคํŽœ์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋กœ๋”ฉ UI ๋ฐ ์ŠคํŠธ๋ฆฌ๋ฐ ์„น์…˜์„ ์ฐธ์กฐํ•˜์„ธ์š”. + +[Routing: Loading UI and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)