๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

[์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js] (๋ฒˆ์™ธ) ์›น์˜ ๋ฐœ์ „ ๊ณผ์ •์œผ๋กœ ๋ณด๋Š” CSR ๊ทธ๋ฆฌ๊ณ  SSG์™€ SSR

by Wonit 2020. 12. 30.

ํ•ด๋‹น ๋ธ”๋กœ๊ทธ ์‹œ๋ฆฌ์ฆˆ๋Š” ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next js ์‹œ๋ฆฌ์ฆˆ๋กœ์จ ์ด 8๋ถ€์ž‘์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
Next.js๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ๋‚ด์šฉ์„ ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ์ง๊ด€์ ์ด๊ฒŒ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

0. ๋ชฉ์ฐจ

1. create-next-app์œผ๋กœ next ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ

2. create-next-app์—์„œ ๋งŒ๋‚œ ์ฒซ ๋ฒˆ์งธ ํ•ต์‹ฌ pages. ๊ทธ๋ฆฌ๊ณ  ๋™์  ๋ผ์šฐํŒ…

3. ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ Link-Component ๊ทธ๋ฆฌ๊ณ  Pre-Fetch

Dynamic Routing๊ณผ Link๋ฅผ ์ด์šฉํ•ด ๊ฐ„๋‹จํ•œ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ค์–ด๋ณด์ž.

4. Next.js์—์„œ head ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฉ‹์ง„ ๋ฐฉ๋ฒ•

๋ฒˆ์™ธ & ์‹ค์Šต) ์ด๋ฏธ์ง€์™€ ๋™์˜์ƒ์„ ์ €์žฅํ•˜๊ณ  ์‚ฌ์šฉํ•ด๋ณด์ž.

5. ์›น์˜ ๋ฐœ์ „ ๊ณผ์ •์œผ๋กœ ๋ณด๋Š” SSG์™€ SSR

6. next์˜ ๋‘ ๋ฒˆ์งธ ํ•ต์‹ฌ Pre-Rendering

7. SSG๋กœ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” ๋…ธ๋ฆฌ๊ธฐ

8. ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งˆ์น˜๋ฉฐ..


์šฐ๋ฆฌ๋Š” ๋‹ค์Œ ์‹œ๊ฐ„์— ๋ฐฐ์šธ SSR, Pre-Rendering๊ณผ ๊ฐ™์€ ๊ธฐ์ˆ ๋“ค์„ ๋ฐฐ์šฐ๊ธฐ ์œ„ํ•ด์„œ SSG์™€ SSR์— ๋Œ€ํ•ด์„œ ์ฐจ์ด๋ฅผ ๋ช…ํ™•ํžˆ ์ธ์ง€ํ•ด์•ผ ํ•œ๋‹ค.

 

๋‚˜์—๊ฒŒ ์™œ Next JS๋ฅผ ๋ฐฐ์šฐ๋ ค ํ–ˆ๋Š”์ง€ ๋ฌผ์–ด๋ณธ๋‹ค๋ฉด ์•„๋งˆ๋„ Server Side Rendering์ด๋ผ๊ณ  ํ•œ๋‹ค.

 

Create-react-app์€ Single Page Application ์ด๋ผ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๊ฐ€ ํž˜๋“œ๋‹ˆ Next๋ฅผ ์ด์šฉํ•ด์„œ SSR์„ ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค.

 

ํ•˜์ง€๋งŒ next๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€๋ฅผ SSG ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

์—ฅ? ๋‚œ SSR์„ ํ•˜๋Ÿฌ ์™”๋Š”๋ฐ SSG๋ฅผ ํ•œ๋‹ค๊ณ ?
๊ทธ๋‚˜์ €๋‚˜ SSG๋Š” ๋ญ์ง€?

๊ทธ๋ž˜์„œ ์ด๋ฒˆ ๊ธฐํšŒ์— CSR์€ ๋ฌด์—‡์ด๊ณ  SSG์™€ SSR์€ ๋ญ”์ง€ ์•Œ์•„๋ณด๊ณ  ๊ณต์œ ํ•ด๋ณด๊ณ ์ž ๋ฒˆ์™ธ๋กœ ํ•ด๋‹น ์ฑ•ํ„ฐ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค.

 

์„ค๋ช…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์–ด๋–ค ๋ฐฉ๋ฒ•์œผ๋กœ ํ• ๊นŒ ๊ณ ๋ฏผ์„ ํ•˜์˜€๊ณ  ๋งŽ์€ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์ฐพ์•„๋ดค๋Š”๋ฐ, ๋‚ด๊ฐ€ ๊ฒช์–ด๋ณธ ๋ฐ”๋กœ ์›น์˜ ์ง„ํ™” ๊ณผ์ •์„ ๋”ฐ๋ผ๊ฐ€๋ฉด์„œ ํ•™์Šตํ•˜๋Š”๊ฒŒ ์ •๋ง ๋„์›€์ด ๋งŽ์ด ๋˜์—ˆ๋‹ค.

 

์‹œ์ž‘ํ•ด๋ณด์ž.

CSR vs SSR vs SSG

์›น์˜ ๋ฐœ์ „ ๊ณผ์ •

์šฐ์„  ์›น์ด ์–ด๋–ค ๊ณผ์ •์„ ๊ฑฐ์ณ์„œ ๋ฐœ์ „ํ–ˆ๋Š”์ง€ ๊ฐ„๋žตํ•˜๊ฒŒ ๊ทธ๋ฆผ์œผ๋กœ ํ™•์ธํ•ด๋ณด์ž.

์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” ๋ฐœ์ „ ๊ณผ์ •์€ ํŒ€ ๋ฒ„๋„ˆ์Šค ๋ฆฌ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ํŠœ๋ง ๋จธ์‹  ์ด๋Ÿฐ ๋ฐœ์ „ ๊ณผ์ •์ด ์•„๋‹ˆ๋ผ html์„ ์„œ๋ฒ„์—์„œ ๋ณด๋‚ด๋Š” ์ผ๋ จ์˜ ๊ณผ์ •์„ ๋งํ•œ๋‹ค.

์ด์™€ ๊ฐ™์€ ๊ณผ์ •์„ ๊ฑฐ์ณ์„œ ๋ฐœ์ „ํ•ด์™”๋‹ค.

์ตœ์ดˆ์˜ ๋ Œ๋”๋ง SSR

 

์ตœ์ดˆ์—๋Š” staticํ•œ html ํŒŒ์ผ๋งŒ ์กด์žฌํ–ˆ๋‹ค.


์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉ์„ ํ•  ์ˆ˜๋„ ์—†์„ ๋ฟ๋”๋Ÿฌ ์›น์ด๋ž€ ํŠน์ • ๋ถ„์•ผ์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๋˜ ๊ฒƒ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€์ค‘์ ์ด๊ฒŒ ๊พธ๋ฐ€ ํ•„์š”๋„ ์—†์–ด ๋” ๊ฐ€๋ฒผ์› ์œผ๋ฉฐ ๊ฐ„๋‹จํ–ˆ๋‹ค.


๊ทธ๋ž˜์„œ ์ตœ์ดˆ์—๋Š” ๋งค ์š”์ฒญ๋งˆ๋‹ค static ํ•œ html ํŒŒ์ผ์ด ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์ „๋‹ฌ๋˜์—ˆ์ง€๋งŒ ์ ์  ๋™์ ์ธ ํŽ˜์ด์ง€๋ฅผ ์›ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทธ๋ž˜์„œ ํƒ„์ƒํ•œ Server Template Engine

์‚ฌ์šฉ์ž๊ฐ€ ์ฆ๊ฐ€ํ•จ์— ๋”ฐ๋ผ ๋” Dynamicํ•œ Rendering ์„ ์›ํ–ˆ๊ณ  php๋‚˜ JSP์™€ ๊ฐ™์€ Template Engine์ด ํƒ„์ƒํ•˜๊ฒŒ ๋˜์–ด html์„ ๋” ๋™์ ์ด๊ฒŒ ๋งŒ๋“ค์—ˆ๋‹ค.


๊ทธ๋ž˜๋„ ์—ฌ์ „ํžˆ ์„œ๋ฒ„์—์„œ HTML์„ ๋ Œ๋”๋งํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋™์ผํ–ˆ๋‹ค.

ajax์˜ ํƒ„์ƒ๊ณผ CSR

์œ„์—์„œ ์‚ฌ์šฉํ•œ ๋™์ ์ธ ํŽ˜์ด์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ํ•˜๋‚˜ ์žˆ์—ˆ๋Š”๋ฐ, ๊ทธ๊ฒƒ์€ ๋ฐ”๋กœ ์ „์ฒด ๋ฆฌ๋กœ๋”ฉ์ด์—ˆ๋‹ค.

 

๋งŒ์•ฝ ๋„ค์ด๋ฒ„ ์ธ๊ธฐ ๊ฒ€์ƒ‰ ์ˆœ์œ„๊ฐ€ ๊ทธ ๋‹น์‹œ์— ์žˆ์—ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

 

๊ทธ๋Ÿผ ์ธ๊ธฐ ๊ฒ€์ƒ‰์–ด๋Š” ๋งค๋ฒˆ ์—…๋ฐ์ดํŠธ ๋˜์–ด์•ผ ํ•˜๋Š”๋ฐ, ๊ทธ๋•Œ์˜ ๊ธฐ์ˆ ๋ ฅ์—์„œ๋Š” ๋งค๋ฒˆ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ๋งˆ๋‹ค ํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ ๋˜์—ˆ๋‹ค.

 

๊ทธ๋ž˜์„œ ํƒ„์ƒํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ ajax.

์ถ•๊ตฌํŒ€ ์•„์•ฝ์Šค ๋กœ๊ณ . ์›น์˜ ajax ์•„๋‹˜

ํ™”๋ฉด ๊นœ๋นก์ž„ ์—†์ด ํŠน์ • ๋ถ€๋ถ„๋งŒ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์ด ๋‚˜์˜ค๊ฒŒ ๋˜์—ˆ๊ณ , ๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์ ์  ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  ์ด ๋•Œ๋ถ€ํ„ฐ js๊ฐ€ ๋™์ ์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ƒ์„ฑํ•ด๋‚ด๋Š” Client Side Rendering์ด ํƒ„์ƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

๋‹ค์‹œ ๋Œ์•„์˜จ SSR

CSR์— ํ˜ธํ™ฉ์„ ๋งž์œผ๋ฉฐ ํƒ„์ƒํ•œ Facebook์˜ React, Google์˜ Angular, ๊ฐœ์ธ์˜ Vue์™€ ๊ฐ™์€ SPA.

 

ํ•˜์ง€๋งŒ ์ด๋Ÿฐ CSR ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์—๋„ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ

  1. seo
  2. ์„ฑ๋Šฅ

๋ฐ”๋กœ ์„ฑ๋Šฅ๊ณผ seo ์˜€๋‹ค.

SEO
SEO๋Š” ์›น ํฌ๋กค๋Ÿฌ๊ฐ€ ์›น ์‚ฌ์ดํŠธ๋ฅผ ์ฝ๊ณ  ์ธ๋ฑ์‹ฑํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๋ฉฐ ์›น ํŽ˜์ด์ง€๊ฐ€ ๊ฒ€์ƒ‰ ์—”์ง„์— ๋…ธ์ถœ๋  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š”๋ฐ, SPA์—์„œ๋Š” ์‚ฌ์šฉ์ž์˜ ํด๋ฆญ์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ JS๋ฅผ ์ด์šฉํ•ด ํŽ˜์ด์ง€๋ฅผ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๊ฐ€ ํž˜๋“ค์—ˆ๋‹ค.


์„ฑ๋Šฅ ๋ฌธ์ œ
ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ Js๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ๊ทธ๋ฅผ ๊ฐ๋‹นํ• ๋งŒํ•œ cpu ๊ธฐ๊ธฐ๊ฐ€ ํ•„์š”ํ–ˆ๋‹ค.


ํ•˜์ง€๋งŒ CPU ์„ฑ๋Šฅ์ด ์ข‹์ง€ ์•Š๊ฑฐ๋‚˜ ๋Œ€์šฉ๋Ÿ‰ js ํŒŒ์ผ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋„คํŠธ์›Œํฌ ์—ฌ๊ฑด์ด ์ž˜ ๊ฐ–์ถฐ์ง€์ง€ ์•Š์€ ๊ณณ์—์„œ๋Š” SPA๊ฐ€ ์˜คํžˆ๋ ค ๋…์ด ๋˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์‚ฌ๋žŒ๋“ค์€ ๋‹ค์‹œ SSR์„ ์ฐพ๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์€ ์œ„์˜ ๋ฐฉ๋ฒ•์„ ํ•ด๊ฒฐํ•˜๊ณ ์ž ๋‹ค์‹œ SSR์„ ์ฐพ๊ธฐ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ, ์ด์ œ๋Š” ์ƒˆ๋กœ์šด SSR์„ ์ฐพ๊ธฐ ์‹œ์ž‘ํ•˜์˜€๋‹ค.

 

์œ„์—์„œ ์‚ฌ์šฉํ•œ SSR๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ HTML์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด์„œ Template Engine์ด๋‚˜ JSP ์ฒ˜๋Ÿผ ์„œ๋ฒ„์ธก ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ตœ์‹ ์˜ JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ์œผ๋ฉฐ Next๋‚˜ Gatsby์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

 

์ด์ œ๋Š” ์„œ๋ฒ„์—์„œ ๋ฏธ๋ฆฌ dom์„ ๋ Œ๋”๋งํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๊ณ  html๋งŒ์„ return ํ•ด์ค„ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ–ˆ๋‹ค.

๋ฐœ์ „๋œ SSR SSG

์•„๋ž˜์˜ SSR์˜ ๋™์ž‘ ๊ณผ์ •์„ ๋ด๋ณด์ž.

SSR ๋™์ž‘ ๊ณผ์ •

  1. ์‚ฌ์šฉ์ž ์š”์ฒญ
  2. ์„œ๋ฒ„๊ฐ€ ํŽ˜์ด์ง€์˜ html ํŒŒ์ผ ์ƒ์„ฑ
  3. ์„œ๋ฒ„๊ฐ€ html์„ ๋ฐ˜ํ™˜
  4. ๋ธŒ๋ผ์šฐ์ €๋Š” html์„ ๋ Œ๋”๋ง

์‚ฌ๋žŒ๋“ค์€ ์ด SSR์„ ๋” ๋ฐœ์ „์‹œํ‚ค๊ธธ ์›ํ–ˆ๊ณ  ๋”์šฑ ์ข‹์€ ์„ฑ๋Šฅ์„ ๊ธฐ๋Œ€ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

 

์—ฌ๊ธฐ์„œ ๋งŒ์•ฝ ์„œ๋ฒ„๊ฐ€ ๋งค ์š”์ฒญ๋งˆ๋‹ค ํ•ญ์ƒ ๊ฐ™์€ ํŽ˜์ด์ง€๋ฅผ ๋ฆฌํ„ดํ•ด์ค€๋‹ค๋ฉด ๋น„ํšจ์œจ์ด์ง€ ์•Š๋‚˜? ์ด๋ž€ ์ƒ๊ฐ์„ ๊ฐ–๊ฒŒ ๋˜์—ˆ๊ณ  ์ด๋ฅผ ํ•ด๊ฒฐํ•  ๋ฐฉ๋ฒ•์œผ๋กœ SSG๊ฐ€ ํƒ„์ƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

SSG

SSG๋Š” ํŽ˜์ด์ง€๊ฐ€ ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š” about๊ณผ ๊ฐ™์€ ํ•ญ์ƒ ๊ฐ™์€ ํŽ˜์ด์ง€๋ฅผ ๋ฏธ๋ฆฌ ์„œ๋ฒ„์—์„œ ์ƒ์„ฑํ•ด์„œ ์š”์ฒญ์— ๋”ฐ๋ผ์„œ ์žฌ์‚ฌ์šฉํ•˜๋Š” ์บ์‹ฑ์„ ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๊ณ  ์ด๋Ÿฐ ๋ฐฉ๋ฒ•์„ Next์—์„œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

๊ทธ๋Ÿผ ์–ธ์ œ ๋ญ˜ ์จ์•ผํ•ด?

๊ทธ๋Ÿผ ์–ธ์ œ ๋ฌด์—‡์„ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์ข‹์„๊นŒ?

SSR

  • ํ‘œ์‹œ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•ญ์ƒ ์ตœ์‹ ์˜ ๋ฐ์ดํ„ฐ์ผ ๋•Œ
  • ์ž์ฃผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์šฉ์ž๋ณ„ ํ˜น์€ ๋™์  ๋ฐ์ดํ„ฐ ์ผ ๋•Œ,

SSG

  • ์ •์ ์ธ ์ •๋ณด๋ฅผ ํ•ญ์ƒ ๋ณด์—ฌ์ฃผ๋Š” ํŽ˜์ด์ง€์ผ ๋•Œ
  • ์ƒํ˜ธ์ž‘์šฉ ๋ฐ์ดํ„ฐ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์„ ๋•Œ.

๋Œ“๊ธ€