๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

SSR

(2)
[ WEB ] CSR๊ณผ SSR ๋น„๊ตํ•˜๊ธฐ CSR(client-side-rendering)๊ณผ SSR(server-side-rendering)์€ ์›น ํŽ˜์ด์ง€์™€ ์ฝ˜ํ…์ธ ๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ์ˆ ์ด๋‹ค. SSR๊ณผ CSR์€ ๋ Œ๋”๋ง ๊ณผ์ •์ด ์ผ์–ด๋‚˜๋Š” ์œ„์น˜์—์„œ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. CSR (Client-Side-Rendering) CSR์€ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ๋ Œ๋”๋ง์„ ํ•˜๋Š” ๊ธฐ์ˆ ๋กœ ์‚ฌ์šฉ์ž์˜ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ JavaScript๋ฅผ ํ†ตํ•ด ์›น ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค. ์„œ๋ฒ„์—์„œ ์ตœ์†Œํ•œ์˜ HTML ํŒŒ์ผ์„ ๋ณด๋‚ด๊ณ , ํด๋ผ์ด์–ธํŠธ ์ธก JavaScript ์ฝ”๋“œ๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐ€์ ธ์™€ ๋ Œ๋”๋งํ•œ๋‹ค. ์ด ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด๋‹ค ๋” ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•˜๊ณ  ๋™์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ณ  ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋กœ๋“œํ•˜์ง€ ์•Š๊ณ ๋„ ์ฝ˜ํ…์ธ ๋ฅผ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ๊ฒฝ์šฐ..
[ NEXT.JS ] Next.js์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ. NEXT.JS๋Š” ๋ฌด์—‡์ผ๊นŒ? Next.js ๋Š” ๋น ๋ฅธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋นŒ๋”ฉ ๋ธ”๋ก์„ ์ œ๊ณตํ•˜๋Š” React ํ”„๋ ˆ์ž„ ์›Œํฌ๋กœ, React์— ํ•„์š”ํ•œ ๋„๊ตฌ ๋ฐ ๊ตฌ์„ฑ์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์ถ”๊ฐ€ ๊ตฌ์กฐ, ๊ธฐ๋Šฅ ๋ฐ ์ตœ์ ํ™”๋ฅผ ์ œ๊ณตํ•œ๋‹ค. Next.js๋Š” SSR(Server-Side-Rendering), ์ •์  ์›น ํŽ˜์ด์ง€ ์ƒ์„ฑ ๋“ฑ React ๊ธฐ๋ฐ˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” Node.js ์œ„์—์„œ ๋นŒ๋“œ๋œ ์˜คํ”ˆ ์†Œ์Šค ์›น ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ๊ตฌ์ถ•ํ•œ ๋‹ค์Œ, Next.js ๊ธฐ๋Šฅ์„ ์ ์ง„์ ์œผ๋กœ ์ฑ„ํƒํ•˜์—ฌ ๋ผ์šฐํŒ…, ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, ํ†ตํ•ฉ๊ณผ ๊ฐ™์€ ์ผ๋ฐ˜์ ์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋™์‹œ์— ๊ฐœ๋ฐœ์ž ๋ฐ ์ตœ์ข… ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. React์˜ ๊ณต์‹ ํŽ˜์ด์ง€์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์†Œ๊ฐœํ•œ๋‹ค..