NextJS

[NextJS] Image๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ์‹ - ์ฒ˜์Œ๋ถ€ํ„ฐ ์บ์‹ฑํ•˜๋ฉด ๋˜์ž–์•„์—ฌ..? ๐Ÿ™

Dana10 2025. 3. 8. 16:44

 

NextJS ๊ฐ•์˜๋ฅผ ๋“ฃ๋˜ ์ค‘ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด ๋‚˜์™”๋‹ค.

์ œ์ผ ์ฒ˜์Œ ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋• ๋А๋ฆฌ์ง€๋งŒ ๊ทธ ์ดํ›„์— ์ƒˆ๋กœ๊ณ ์นจ์„ ๋ฐ˜๋ณตํ•ด๋„ ์ด๋ฏธ์ง€๊ฐ€ ๋น ๋ฅด๊ฒŒ ๋ถˆ๋Ÿฌ์™€์ง„๋‹ค.

์˜คํ˜ธ ๊ทธ๋ ‡๊ตฐ ์บ์‹ฑ๋œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ทธ๋Ÿฐ๊ฐ€ ๋ณด๋‹ค~ ๐Ÿ˜Œ

 

์•„๋‹ˆ ์ž ๊น๋งŒ,

๊ทธ๋Ÿผ ์ฒ˜์Œ๋ถ€ํ„ฐ ์บ์‹ฑ๋œ ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ ์“ฐ๋ฉด ๋˜๋Š” ๊ฑฐ ์•„๋‹Œ๊ฐ€?

NextJS๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ SSG๋ฅผ ์ง€์›ํ•˜๊ณ  CDN์— ์บ์‹ฑ๋œ HTML์„ ๋ฐ›์•„๋‹ค๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋Š” ๋ณด์—ฌ์ฃผ๊ธฐ๋งŒ ํ•˜๋Š”๋ฐ

์ด๋ฏธ์ง€๋„ ์ฒ˜์Œ์— ๊ฑฐ๊ธฐ ์บ์‹ฑ๋˜์–ด ์žˆ๋Š” ๊ฑฐ ์•„๋ƒ?

์•„๋‹ˆ ๋‘ ๋ฒˆ์งธ๋ถ€ํ„ฐ๋Š” ์บ์‹ฑ๋œ ๊ฑธ ๊ฐ€์ ธ๋‹ค ์“ด๋‹ค๋ฉฐ? ๊ทธ๋Ÿผ ์ฒซ ๋ฒˆ์งธ๋Š” ์™œ ์บ์‹ฑ๋œ ๊ฑธ ์•ˆ ์จ??

 

CDN์— ์บ์‹ฑ์ด ๋˜๋Š” ๊ฒŒ ์•„๋‹Œ๊ฐ€? ๋ธŒ๋ผ์šฐ์ €์— ์บ์‹ฑ์ด ๋˜๋‚˜?

๊ทธ๋Ÿฐ๋ฐ ๋ธŒ๋ผ์šฐ์ € ์บ์‹œ ๋น„์šฐ๊ธฐ ๋ฐ ๊ฐ•๋ ฅ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•ด๋„ ์—ฌ์ „ํžˆ ๋น ๋ฅด๊ฒŒ ์ด๋ฏธ์ง€๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ์žˆ๋‹ค.

 

์˜ค์ž‰.. ??? ๐Ÿ˜ณ


 

๊ฐ•์˜๋ฅผ ๋‹ค์‹œ ๋Œ๋ ค๋ณด๋‹ˆ๊นŒ NextJS๋Š” ์œ ์ €์˜ ๋ทฐํฌ์ธํŠธ์— ์ด๋ฏธ์ง€๊ฐ€ ๋ณด์ผ ๋•Œ ์ด๋ฏธ์ง€๋ฅผ ๋ฐ›์•„์˜จ๋‹ค๊ณ  ํ–ˆ๋‹ค.

 

 

์‚ฌ์šฉ์ž๊ฐ€ ํ•ด๋‹น ์ด๋ฏธ์ง€์— ์ ‘๊ทผํ•˜์ง€ ์•Š์œผ๋ฉด NextJS๋Š” ๊ตณ์ด ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™”ํ•˜์ง€ ์•Š๋Š”๋‹ค. 

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๋นŒ๋“œ ์‹œ์ ์—๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ์ด๋ฏธ์ง€์— ์ ‘๊ทผ์„ ํ• ์ง€ ์•Œ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์• ์ดˆ์— ๋นŒ๋“œ ์‹œ์ ์—๋Š” ์ด๋ฏธ์ง€๊ฐ€ ์ตœ์ ํ™”๋˜์ง€ ์•Š๋Š”๋‹ค.

 

์˜ค์ผ€์ด ์—ฌ๊ธฐ๊นŒ์ง€ ๋‚˜๋ฆ„ ํ•ฉ๋ฆฌ์ ์ธ ์ถ”๋ก ์„ ํ–ˆ๊ณ 

 

์ด์ œ๋ถ€ํ„ฐ ์„œ์นญ์„ ๋ฐ”ํƒ•์œผ๋กœ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ..


๊ธฐ๋ณธ์ ์œผ๋กœ CDN์—๋Š” ์ •์ ์ธ ๋ฆฌ์†Œ์Šค๊ฐ€ ์บ์‹ฑ๋œ๋‹ค.

์œ ์ €์˜ ๋ทฐํฌ์ธํŠธ์— ์ด๋ฏธ์ง€๊ฐ€ ๋“ค์–ด๊ฐ€์•ผ ๊ทธ๋•Œ์„œ์•ผ ์ด๋ฏธ์ง€๋ฅผ ๋ฐ›์•„์˜ค๊ธฐ ๋•Œ๋ฌธ์—

๋งจ ์ฒ˜์Œ ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™”ํ•  ๋•Œ๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋™์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋œ๋‹ค.

 

์ด๋ฏธ์ง€๊ฐ€ ์บ์‹ฑ๋˜๋Š” ๊ณผ์ •์„ ์‚ดํŽด๋ณด๋ฉด,

  1. ์œ ์ €๊ฐ€ ์–ด๋–ค ์ด๋ฏธ์ง€์— ์ ‘๊ทผํ•  ๋•Œ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ CDN์— ์š”์ฒญํ•œ๋‹ค.
  2. CDN์€ ์ž‰??? ๋‚˜ ๊ทธ๋Ÿฐ ๊ฑฐ ์—†๋Š”๋ฐ?? ๐Ÿซจ ํ•˜๊ณ  ์„œ๋ฒ„์— ์ด๋ฏธ์ง€ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•œ๋‹ค.
  3. ์„œ๋ฒ„๋Š” ๊ทธ๋•Œ์„œ์•ผ ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™”ํ•ด์„œ ๋‹ค์‹œ CDN์—๊ฒŒ ์ „๋‹ฌํ•œ๋‹ค.
  4. CDN์€ ์ตœ์ ํ™”๋œ ์ด๋ฏธ์ง€๋ฅผ ์บ์‹ฑํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์— ์ „๋‹ฌํ•œ๋‹ค.
  5. ์ด๋•Œ ์„œ๋ฒ„์—์„œ ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™”ํ•˜๋ฉด์„œ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์œ ์ € ์ž…์žฅ์—์„œ๋Š” ์ด๋ฏธ์ง€ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋А๋ฆฌ๋‹ค๊ณ  ๋А๊ปด์งˆ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‘ ๋ฒˆ์งธ ์š”์ฒญ๋ถ€ํ„ฐ๋Š” CDN์— ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋ฅผ ๋งˆ์นœ ํŒŒ์ผ์ด ์บ์‹ฑ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์—

๋ธŒ๋ผ์šฐ์ €๋Š” ๊ทธ๋ƒฅ ๊ทธ ํŒŒ์ผ์„ ๋ฐ›์•„๋‹ค ๋ณด์—ฌ์ฃผ๋ฏ€๋กœ ์ด๋ฏธ์ง€ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋น ๋ฅธ ๊ฒƒ์ด๋‹ค! 

 

์—ฌ๊ธฐ์„œ ๋“œ๋Š” ๋˜ ๋‹ค๋ฅธ ์˜๋ฌธ...

 

์–ด์ œ ๋ฐฐ์šฐ๊ธฐ๋กœ๋Š” ์ข‹์•„์š”์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์€ ์œ ์ €์™€ ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— SSG๋กœ๋Š” ์•ˆ ๋œ๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ,,

ํด๋ผ์ด์–ธํŠธ์—์„œ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•œ๋‹ค๋ฉด ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅด๊ณ  ๊ทธ ์ƒํƒœ๋ฅผ ์œ ์ง€๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ

์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋ฉด CDN์—์„œ ์บ์‹ฑ๋œ ํŒŒ์ผ์„ ๋ฐ›์•„์˜ค๋Š”๋ฐ

์ด ํŒŒ์ผ์€ ๋นŒ๋“œ ์‹œ์ ์— ๋งŒ๋“ค์–ด์ง„ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ข‹์•„์š”๊ฐ€ ์ ์šฉ๋˜์–ด ์žˆ์ง€ ์•Š์•„์„œ

์ข‹์•„์š” ์ƒํƒœ๊ฐ€ ์‚ฌ๋ผ์งˆ ๊ฑฐ๋ผ๊ณ  ๊ทธ๋žฌ๋Š”๋ฐ,,๐Ÿ™„

๊ทธ๋Ÿฌ๋ฉด ์ข‹์•„์š”๋ฅผ ๋ˆŒ๋Ÿฌ์„œ ๋ฐ”๋€ ์ƒํƒœ๋ฅผ ์„œ๋ฒ„๊ฐ€ ๋‹ค์‹œ CDN์— ์ „๋‹ฌํ•˜๊ณ  CDN์— ์ƒˆ๋กญ๊ฒŒ ์บ์‹ฑํ•˜๋ฉด ๋˜๋Š” ๊ฑฐ ์•„๋‹Œ๊ฐ€?

 

 

์ข‹์•„์š” ์ƒํƒœ๋Š” ์‚ฌ์šฉ์ž์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์— ์˜ํ•ด ์ƒํƒœ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๋™์ ์ธ ๋ฆฌ์†Œ์Šค์ด๊ธฐ ๋•Œ๋ฌธ์— API๋กœ ์ฒ˜๋ฆฌ๋œ๋‹ค.

์œ ์ €๊ฐ€ ์ข‹์•„์š”๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ์„œ๋ฒ„์— ์ƒํƒœ ๋ณ€๊ฒฝ์„ ์š”์ฒญํ•ด์•ผ ํ•˜๊ณ  ์ข‹์•„์š”๋ฅผ ํ•ด์ œํ•ด๋„ ์„œ๋ฒ„์— ์ƒํƒœ๋ณ€๊ฒฝ์„ ์š”์ฒญํ•ด์•ผ ํ•œ๋‹ค.

์ฆ‰ ์œ ์ €์™€์˜ ์ƒํ˜ธ์ž‘์šฉ ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„ ์š”์ฒญ -> ์บ์‹ฑ -> ์š”์ฒญ -> ์บ์‹ฑ์„ ๋ฐ˜๋ณตํ•˜๋Š” ๋ถˆํ•„์š”ํ•œ ์ž‘์—…์ด ๋Š˜์–ด๋‚˜๊ฒŒ ๋œ๋‹ค.

๋”ฐ๋ผ์„œ ์ด๋ ‡๊ฒŒ ์œ ์ €์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์— ์˜ํ–ฅ์„ ํฌ๊ฒŒ ๋ฐ›๋Š” ๊ธฐ๋Šฅ๋“ค์€ CDN์— ์บ์‹ฑ์„ ํ•ด์„œ ์‚ฌ์šฉํ•˜๊ธฐ๋ณด๋‹ค๋Š”

SSR์ด๋‚˜ CSR์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋‹ค.

 

์—ฌ๊ธฐ์„œ ๋˜ ๊ทธ๋Ÿผ ์–ธ์ œ SSR์„ ํ•˜๊ณ  ์–ธ์ œ CSR์„ ํ• ๊นŒ? ํ•˜๋Š” ์ƒ๊ฐ์ด ๊ผฌ๋ฆฌ๋ฅผ ๋ฌด๋Š”๋ฐ,

CSR์€ SEO์— ์ทจ์•ฝํ•˜๊ธฐ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๊ฐ€ ํ•„์š” ์—†๋Š” ๋งˆ์ดํŽ˜์ด์ง€๋‚˜ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€์— ์ ํ•ฉํ•˜๋‹ค!