# Nuxt ์„œ๋น„์Šค ๋ฐฐํฌ ๋ฐฉ๋ฒ•

Nuxt.js ์„œ๋น„์Šค๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์„ ํƒํ•œ Universal ๋ชจ๋“œ์˜ ๋ฐฐํฌ ๋ฐฉ์‹์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ์•„๋ž˜ 2๊ฐ€์ง€ ์œ ํ˜•์— ๋”ฐ๋ฅธ ๋ฐฐํฌ ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

nuxt-app-mode

# SSR(Server Side Rendering)

SSR ๋ชจ๋“œ๋Š” ์œ„ ๊ทธ๋ฆผ์—์„œ Deployment Target์„ Server(Node.js hosting)์œผ๋กœ ์„ ํƒํ•œ ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. ๋„‰์ŠคํŠธ ์„ค์ • ํŒŒ์ผ์˜ target ์†์„ฑ ๊ฐ’์ด ์•„๋ž˜์™€ ๊ฐ™์ด server๋กœ ์ง€์ •๋ฉ๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  target: 'server'
}

TIP

target ์†์„ฑ์˜ ๊ธฐ๋ณธ ๊ฐ’์€ server์ด๊ธฐ ๋•Œ๋ฌธ์— ์„ค์ • ํŒŒ์ผ์— ๋ณด์ด์ง€ ์•Š๋”๋ผ๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค ๐Ÿ˜ƒ

SSR ๋ชจ๋“œ๋กœ ์ƒ์„ฑํ•œ ์›น ์„œ๋น„์Šค๋Š” ๋ฐฐํฌํ•˜๋ ค๋Š” ์„œ๋ฒ„์— Node.js ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๋ฐฐํฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํด๋ผ์šฐ๋“œ ํ”Œ๋žซํผ๋ณ„ ์ž์„ธํ•œ ๊ฐ€์ด๋“œ๋Š” ์•„๋ž˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

# SSG(Static Site Generation)

SSG ๋ชจ๋“œ๋Š” Deployment Target์„ Static(Static/Jamstack hosting)์„ ์„ ํƒํ•œ ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. ๋„‰์ŠคํŠธ ์„ค์ • ํŒŒ์ผ์˜ target ์†์„ฑ ๊ฐ’์€ static์œผ๋กœ ์ง€์ •๋ฉ๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  target: 'static'
}

SSG ๋ชจ๋“œ๋Š” ์‚ฌ์šฉ์ž์˜ ํŽ˜์ด์ง€ URL ์š”์ฒญ์ด ๋“ค์–ด์˜ฌ ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๊ทธ๋ ค์„œ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด๋‚ด์ฃผ๋Š” SSR ๋ชจ๋“œ์™€ ๋‹ค๋ฅด๊ฒŒ ์›น ์„œ๋น„์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€๋ฅผ ๋ฏธ๋ฆฌ ๊ทธ๋ ค์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒœํ‹ฑ ์„œ๋ฒ„์— ๋ฐฐํฌํ•˜๋Š” ํ˜•ํƒœ๋กœ ์ง„ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. Netlify ๋“ฑ์˜ CD(Continuous Delivery) ํ”Œ๋žซํผ์„ ์ด์šฉํ•˜์—ฌ ์†์‰ฝ๊ฒŒ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TIP

JAMStack์ด๋ž€ JavaScript & API & Markup์„ ์˜๋ฏธํ•˜๋ฉฐ API ์„œ๋ฒ„ ์—†์ด ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๋ฐฉ์‹์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.