software

๐Ÿš€ ๋‘ ์„ธ๊ณ„์˜ ์žฅ์ : Partial Pre-Rendering (PPR) ์ดํ•ดํ•˜๊ธฐ

๋ฐœํ–‰: (2025๋…„ 12์›” 30์ผ ์˜ค์ „ 05:00 GMT+9)
1 ๋ถ„ ์†Œ์š”
์›๋ฌธ: Dev.to

Source: Dev.to

PPR์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

  • ์…ธ (Shell): ์ œ๋ชฉ, ์„ค๋ช… ๋ฐ ์ด๋ฏธ์ง€๊ฐ€ ์‚ฌ์ „ ๋ Œ๋”๋ง๋˜์–ด CDN์„ ํ†ตํ•ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค(์ดˆ๊ณ ์†).
  • ๋™์  ์ฝ˜ํ…์ธ : ์‡ผํ•‘ ์นดํŠธ์™€ ๊ฐœ์ธํ™”๋œ ์ถ”์ฒœ์ด ์ค€๋น„๋˜๋Š” ์ฆ‰์‹œ โ€œ์‚ฝ์ž…โ€๋ฉ๋‹ˆ๋‹ค.

์™œ ์ค‘์š”ํ•œ๊ฐ€์š”?

  • SEO: ์ฃผ์š” ์ฝ˜ํ…์ธ ๊ฐ€ ์ฒ˜์Œ๋ถ€ํ„ฐ ๊ฒ€์ƒ‰ ๋ด‡์— ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.
  • ๋‹จ์ˆœ์„ฑ: force-static ๋˜๋Š” force-โ€ฆ ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์‹ค์ œ ์˜ˆ์‹œ (Next.js)

Back to Blog

๊ด€๋ จ ๊ธ€

๋” ๋ณด๊ธฐ ยป

Next.js 16 ์ถœ์‹œ๋จ: ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ, ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๋ฐ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์‹ฌ์ธต ๋ถ„์„

Next.js 16์ด ๊ณต์‹์ ์œผ๋กœ ์ถœ์‹œ๋˜์—ˆ์œผ๋ฉฐ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„์— ์ค‘์š”ํ•œ ํ˜์‹ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฒ„์ „์€ ์„ฑ๋Šฅ, ์บ์‹œ ๋ชจ๋ธ, ๋ผ์šฐํŒ… ๋™์ž‘โ€ฆ

Next js์—์„œ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•

์ œ๊ฐ€ ์ฒ˜์Œ Next.js๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์„ ๋•Œ, ๊ธฐ๋ณธ ์„ค์ •๋งŒ์œผ๋กœ๋„ ์–ผ๋งˆ๋‚˜ ๋น ๋ฅธ์ง€ ์ •๋ง ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์ง€๋ฉด์„œ bundle size๊ฐ€ ๊ณ„์† ์ฆ๊ฐ€ํ•ด ๋กœ๋“œ๊ฐ€ ๋Š๋ ค์กŒ์Šต๋‹ˆ๋‹ค.

์›น์‚ฌ์ดํŠธ์— Vertical Player ์ถ”๊ฐ€

Vertical Player๋Š” Video.js ์œ„์— ๊ตฌ์ถ•๋˜๊ณ  Next.js๋กœ ๊ตฌ๋™๋˜๋Š” ๋ชฐ์ž…ํ˜• ์Šคํฌ๋กค ์ค‘์‹ฌ ๋น„๋””์˜ค ํ”Œ๋ ˆ์ด์–ด์ž…๋‹ˆ๋‹ค. ์„ธ๋กœ ๋น„๋””์˜ค ์žฌ์ƒ์„ ์œ„ํ•ด ํŠน๋ณ„ํžˆ ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.