[WEB] SPA, MPA, CSR, SSR

yayaya_hojinΒ·2024λ…„ 1μ›” 23일

WEB

λͺ©λ‘ 보기
4/16
post-thumbnail

πŸ“„ SPA(Single-page Application)

ν•œ 개의 νŽ˜μ΄μ§€λ‘œ κ΅¬μ„±λœ μ• ν”Œλ¦¬μΌ€μ΄μ…˜

  • 단 ν•œ 번만 λ¦¬μ†ŒμŠ€ λ‘œλ”© (처음 νŽ˜μ΄μ§€ λ‘œλ”© μ‹œκ°„μ΄ κΈΈλ‹€)

  • νŽ˜μ΄μ§€ 이동 μ‹œ κΈ°μ‘΄ νŽ˜μ΄μ§€μ˜ λ‚΄λΆ€λ₯Ό μˆ˜μ •ν•΄μ„œ 바뀐 λΆ€λΆ„λ§Œ λ³΄μ—¬μ€Œ

  • 졜초 νŽ˜μ΄μ§€ λ‘œλ”©μ„ ν•œ μ‹œμ λΆ€ν„°λŠ” ν•„μš”ν•œ λΆ€λΆ„λ§Œ μ„œλ²„μ—μ„œ λ°›μ•„μ„œ ν™”λ©΄ κ°±μ‹ 

πŸ‘ SPA μž₯점

1) 전체 νŽ˜μ΄μ§€λ₯Ό μ—…λ°μ΄νŠΈ ν•˜μ§€ μ•Šμ•„ λΉ λ₯΄κ³  κΉœλΉ‘κ±°λ¦¬λŠ” ν˜„μƒμ΄ μ—†μŒ

2) ν•„μš”ν•œ λ¦¬μ†ŒμŠ€λ§Œ 뢀뢄적 λ‘œλ”©μ„ 톡해 μ„±λŠ₯이 μ’‹μŒ

πŸ‘Ž SPA 단점

1) JS νŒŒμΌμ„ ν•œ λ²ˆμ— λ°›μ•„μ˜€κΈ° λ•Œλ¬Έμ— 초기 νŽ˜μ΄μ§€ λ‘œλ”© μ‹œκ°„μ΄ κΈΈλ‹€

2) SEO(검색엔진 μ΅œμ ν™”)κ°€ μ•ˆ μ’‹μŒ

  • SPAλŠ” νŽ˜μ΄μ§€λ₯Ό 이동해도 <head> νƒœκ·Έμ˜ μžˆλŠ” Meta Dataκ°€ λ°”λ€Œμ§€ μ•Šμ•„ λͺ¨λ“  νŽ˜μ΄μ§€κ°€ λ™μΌν•œ Meta Dataλ₯Ό κ°€μ§€λŠ” 문제점이 μžˆλ‹€.

πŸ“‘ MPA(Multiple-page Application)

μ—¬λŸ¬ 개의 νŽ˜μ΄μ§€λ‘œ κ΅¬μ„±λœ μ• ν”Œλ¦¬μΌ€μ΄μ…˜

  • μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•  λ•Œλ§ˆλ‹€ 정적 λ¦¬μ†ŒμŠ€λ₯Ό λ‹€μš΄λ‘œλ“œ λ°›μŒ

  • νŽ˜μ΄μ§€ 이동 및 μƒˆλ‘œ κ³ μΉ¨ μ‹œ 전체 νŽ˜μ΄μ§€λ₯Ό μž¬λ Œλ”λ§

πŸ‘ MPA μž₯점

1) ν•΄λ‹Ή νŽ˜μ΄μ§€μ— ν•„μš” λ¦¬μ†ŒμŠ€λ§Œ κ°€μ Έμ˜€κΈ° λ•Œλ¬Έμ— 첫 λ‘œλ”©μ΄ 빠름

2) μ™„μ„±λœ HTML νŒŒμΌμ„ μ„œλ²„λ‘œ λΆ€ν„° 받아와 SEO κ΄€μ μ—μ„œ μœ λ¦¬ν•¨

  • SPA와 달리 μ„œλ²„λ‘œ λΆ€ν„° μ™„μ„±λœ HTML νŒŒμΌμ„ λ°›μ•„μ˜€κΈ° λ•Œλ¬Έμ— νŽ˜μ΄μ§€ λ§ˆλ‹€ λ‹€λ₯Έ Meta Dataλ₯Ό 뢈러올 수 μžˆλ‹€.

πŸ‘Ž MPA 단점

1) μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•˜λ©΄ κΉœλΉ‘κ±°λ¦¬λŠ” ν˜„μƒμ΄ μžˆλ‹€(항상 전체 νŽ˜μ΄μ§€ μž¬λ Œλ”λ§μœΌλ‘œ UX λΆˆνŽΈν•¨μ΄ 쑴재)

2) μ„œλ²„ λ Œλ”λ§μ— λ”°λ₯Έ λΆ€ν•˜

smpa_img

πŸ–₯️ CSR(Client-side Rendering)

csr_img

CSR은 Client-side Rendering의 μ•½μžλ‘œ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ λ Œλ”λ§ ν•˜λŠ” 방식이닀.

βš™οΈ CSR κ³Όμ •

1) μ‚¬μš©μžκ°€ μ›Ήμ‚¬μ΄νŠΈμ— λ°©λ¬Έ ν›„ μ„œλ²„μ— μš”μ²­μ„ 보냄

2) μ„œλ²„κ°€ μš”μ²­μ„ λ°›κ³  λΌˆλŒ€λ§Œ μžˆλŠ” HTML νŒŒμΌμ„ 응닡과 ν•¨κ»˜ 보냄

3) λΈŒλΌμš°μ €κ°€ JSλ₯Ό λ‹€μš΄λ‘œλ“œ λ°›μŒ

4) JSκ°€ μ‹€ν–‰ν•  μ€€λΉ„κ°€ 되면 λ™μ μœΌλ‘œ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄ νŽ˜μ΄μ§€λ₯Ό λ³΄μ—¬μ€Œ

πŸ—„οΈ SSR(Server-side Rendering)

ssr_img

SSR은 Server-side Rendering의 μ•½μžλ‘œ μ„œλ²„ μΈ‘μ—μ„œ λ Œλ”λ§ ν•˜λŠ” 방식이닀.

βš™οΈ SSR κ³Όμ •

1) μ‚¬μš©μžκ°€ μ›Ήμ‚¬μ΄νŠΈμ— λ°©λ¬Έ ν›„ μ„œλ²„μ— μš”μ²­μ„ 보냄

2) μ„œλ²„λŠ” μ¦‰μ‹œ λ Œλ”λ§ κ°€λŠ₯ν•œ HTML 생성

3) HTML νŒŒμΌμ„ μ‚¬μš©μž 화면에 보여주고 ν΄λΌμ΄μ–ΈνŠΈλŠ” JS νŒŒμΌμ„ λ‹€μš΄λ‘œλ“œ λ°›μŒ

4) JS λ‹€μš΄λ‘œλ“œ 쀑 νŽ˜μ΄μ§€λŠ” λ³΄μ—¬μ§€λ‚˜ μƒν˜Έμž‘μš©μ€ μ•ˆλ¨, 단 μ‚¬μš©μž μ‘°μž‘μ„ κΈ°μ–΅ν•΄λ‘ 

5) λΈŒλΌμš°μ €μ—μ„œ JSκ°€ μ‹€ν–‰λ˜λ©΄ μƒν˜Έμž‘μš©μ΄ κ°€λŠ₯ν•΄μ§€κ³  이전 κΈ°μ–΅ν•΄λ‘” μ‚¬μš©μž μ‘°μž‘μ„ 싀행함

0개의 λŒ“κΈ€