[CS] SPA vs MPA & CSR vs SSR

jinyoung985ยท2023๋…„ 1์›” 30์ผ
0

CS

๋ชฉ๋ก ๋ณด๊ธฐ
6/6
post-thumbnail

๐Ÿ“‹ SPA vs MPA & CSR vs SSR

Single Page Application๊ณผ Multiple Page Application,
๊ทธ๋ฆฌ๊ณ  Client Side Rendering, Server Side Rendering์˜ ์ฐจ์ด๋ฅผ ์•Œ์•„๋ณด์ž.


๐Ÿ“Œ 1. SPA vs MPA

1-1. SPA๋ž€?

๋œป ๊ทธ๋Œ€๋กœ SPA(Single Page Application)๋Š” ํ•œ ๊ฐœ์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋‹ค.

SPA๋Š” CSR(Client Side Rendering) ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋งํ•œ๋‹ค.
๋‹จ ํ•œ ๋ฒˆ๋งŒ ๋ฆฌ์†Œ์Šค(HTML, CSS, JavaScript)๋ฅผ ๋กœ๋”ฉํ•˜๊ณ , ๊ทธ ํ›„์—๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ๋งŒ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•œ๋‹ค.

๋Œ€ํ‘œ์ ์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ์šฐ์ˆ˜ํ•œ ์‚ฌ์šฉ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•œ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์ง€๋งŒ, ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)๊ฐ€ ์–ด๋ ต๋‹ค๋Š” ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

++ SPA ๋ฐฉ์‹์ด ๋ชจ๋‘ CSR์ธ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

1-2. MPA๋ž€?

MPA๋Š” Multiple Page Application์˜ ์•ฝ์ž์ธ๋ฐ, ์ด ๋˜ํ•œ ๋œป ๊ทธ๋Œ€๋กœ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋‹ค.

MPA๋Š” SSR(Server Side Application) ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋งํ•œ๋‹ค.
์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋œ ์ •์  ๋ฆฌ์†Œ์Šค(HTML, CSS, JavaScript)๊ฐ€ ๋‹ค์šด๋กœ๋“œ๋œ๋‹ค.

ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•˜๊ฑฐ๋‚˜ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•œ๋‹ค.

1-3. SPA vs MPA

  • SEO
    SPA๋Š” ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)๊ฐ€ ํž˜๋“ค๊ณ , MPA๊ฐ€ SEO์ ์ธ ์ธก๋ฉด์—์„œ ๋” ์œ ๋ฆฌํ•˜๋‹ค.

  • ์ฒซ ๋ฒˆ์งธ ๋กœ๋”ฉ
    JS ํŒŒ์ผ์„ ๋ฒˆ๋“ค๋งํ•ด์„œ ํ•œ ๋ฒˆ์— ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— ์ดˆ๊ธฐ ๊ตฌ๋™ ์†๋„๊ฐ€ ๋Š๋ฆฐ ๋ฐ˜๋ฉด, MPA์˜ ์ฒซ ๋กœ๋”ฉ์€ ๋งค์šฐ ์งง๋‹ค.

  • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜
    ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋•Œ๋งˆ๋‹ค ํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ์ด ๋˜๋Š” MPA์— ๋น„ํ•ด ํŽ˜์ด์ง€๊ฐ€ ๊นœ๋นก์ด์ง€ ์•Š๋Š” SPA๊ฐ€ ๋” ๋›ฐ์–ด๋‚œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•œ๋‹ค.

  • ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ
    SPA๋Š” ์ปดํฌ๋„ŒํŠธ๋ณ„ ๊ฐœ๋ฐœ์— ์šฉ์ดํ•˜๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.


๐Ÿ“Œ 2. CSR vs SSR

2-1. CSR

CSR(Client Side Rendering)์€ ๋ Œ๋”๋ง์ด ํด๋ผ์ด์–ธํŠธ ์ชฝ์—์„œ ์ผ์–ด๋‚œ๋‹ค.

์„œ๋ฒ„๋Š” ์š”์ฒญ์„ ๋ฐ›์œผ๋ฉด ํด๋ผ์ด์–ธํŠธ์— HTML๊ณผ JS๋ฅผ ๋ณด๋‚ด์ค€๋‹ค. ํด๋ผ์ด์–ธํŠธ๋Š” ๊ทธ๊ฒƒ์„ ๋ฐ›์•„ ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•œ๋‹ค.

  • User๊ฐ€ Website ์š”์ฒญ์„ ๋ณด๋ƒ„.
  • CDN์ด HTML ํŒŒ์ผ๊ณผ JS๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋งํฌ๋ฅผ ํด๋ผ์ด์–ธํŠธ๋กœ ๋ณด๋‚ธ๋‹ค.

    CDN : aws์˜ cloudflare๋ฅผ ์ƒ๊ฐํ•˜๋ฉด ๋จ. ์—”๋“œ ์œ ์ €์˜ ์š”์ฒญ์— '๋ฌผ๋ฆฌ์ '์œผ๋กœ ๊ฐ€๊นŒ์šด ์„œ๋ฒ„์—์„œ ์š”์ฒญ์— ์‘๋‹ตํ•˜๋Š” ๋ฐฉ์‹

  • ํด๋ผ์ด์–ธํŠธ๋Š” HTML๊ณผ JS๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๋Š”๋‹ค.
    (์ด๋•Œ SSR๊ณผ ๋‹ฌ๋ฆฌ ์œ ์ €๋Š” ์•„๋ฌด๊ฒƒ๋„ ๋ณผ ์ˆ˜ ์—†๋‹ค.)
  • ์ƒ๋žต
  • ๋‹ค์šด์ด ์™„๋ฃŒ๋œ JS๊ฐ€ ์‹คํ–‰๋œ๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ์œ„ํ•œ API๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.
    (์ด๋•Œ ์œ ์ €๋“ค์€ placeholder๋ฅผ ๋ณด๊ฒŒ๋œ๋‹ค.)
  • ์„œ๋ฒ„๊ฐ€ API๋กœ๋ถ€ํ„ฐ์˜ ์š”์ฒญ์— ์‘๋‹ตํ•œ๋‹ค.
    API๋กœ๋ถ€ํ„ฐ ๋ฐ›์•„์˜จ data๋ฅผ placeholder ์ž๋ฆฌ์— ๋„ฃ์–ด์ค€๋‹ค. ์ด์ œ ํŽ˜์ด์ง€๋Š” ์ƒํ˜ธ์ž‘์šฉ์ด ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.

2-2. SSR

SSR(Server Side Rendering)์€ ์„œ๋ฒ„์ชฝ์—์„œ ๋ Œ๋”๋ง ์ค€๋น„๋ฅผ ๋๋งˆ์นœ ์ƒํƒœ๋กœ ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

  • User๊ฐ€ Website ์š”์ฒญ์„ ๋ณด๋ƒ„.
  • Server๋Š” 'Ready to Render'. ์ฆ‰, ์ฆ‰์‹œ ๋ Œ๋”๋ง ๊ฐ€๋Šฅํ•œ htmlํŒŒ์ผ์„ ๋งŒ๋“ ๋‹ค.
    (๋ฆฌ์†Œ์Šค ์ฒดํฌ, ์ปดํŒŒ์ผ ํ›„ ์™„์„ฑ๋œ HTML ์ปจํ…์ธ ๋กœ ๋งŒ๋“ ๋‹ค.)
  • ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌ๋˜๋Š” ์ˆœ๊ฐ„, ์ด๋ฏธ ๋ Œ๋”๋ง ์ค€๋น„๊ฐ€ ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— HTML์€ ์ฆ‰์‹œ ๋ Œ๋”๋ง ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์‚ฌ์ดํŠธ ์ž์ฒด๋Š” ์กฐ์ž‘ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. (Javascript๊ฐ€ ์ฝํžˆ๊ธฐ ์ „์ด๋‹ค.)
  • ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค์šด๋ฐ›๋Š”๋‹ค.
  • ๋‹ค์šด ๋ฐ›์•„์ง€๊ณ  ์žˆ๋Š” ์‚ฌ์ด์— ์œ ์ €๋Š” ์ปจํ…์ธ ๋Š” ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ์‚ฌ์ดํŠธ๋ฅผ ์กฐ์ž‘ ํ•  ์ˆ˜๋Š” ์—†๋‹ค. ์ด๋•Œ์˜ ์‚ฌ์šฉ์ž ์กฐ์ž‘์„ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋Š”๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €๊ฐ€ Javascript ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
  • JS๊นŒ์ง€ ์„ฑ๊ณต์ ์œผ๋กœ ์ปดํŒŒ์ผ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋˜ ์‚ฌ์šฉ์ž ์กฐ์ž‘์ด ์‹คํ–‰๋˜๊ณ  ์ด์ œ ์›น ํŽ˜์ด์ง€๋Š” ์ƒํ˜ธ์ž‘์šฉ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€