TIL. 43 CSR, SSR

rious275Β·2021λ…„ 9μ›” 17일
0

Computer Science

λͺ©λ‘ 보기
1/2

πŸ’‘ SPA (Single Page Application)

  • 말 κ·ΈλŒ€λ‘œ ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€λ‘œ 이루어진 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μœΌλ‘œ, μ„œλ²„μ—μ„œ μ΅œμ΄ˆμ—λ§Œ νŽ˜μ΄μ§€λ₯Ό λ°›μ•„μ˜¨ ν›„ μ΄ν›„μ—λŠ” λ™μ μœΌλ‘œ ꡬ성해 μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό λ°›μ•„μ˜€μ§€ μ•ŠλŠ”λ‹€.(데이터λ₯Ό μˆ˜μ •, μ‘°νšŒν•  λ•Œ μƒˆλ‘œ κ³ μΉ¨λ˜μ§€ μ•ŠμŒ)
  • μ‰½κ²Œ 말해, 처음 λΆˆλŸ¬μ™”λ˜ νŽ˜μ΄μ§€μ˜ λ‚΄μš©λ§Œ λ³€κ²½ν•˜λŠ” 방식이고, νŽ˜μ΄μ§€ 이동간 μ„œλ²„μ— μš”μ²­μ„ ν•˜μ§€ μ•ŠλŠ”λ‹€.
  • λŒ€ν‘œμ μœΌλ‘œ React, Vue, Angularκ°€ μžˆλ‹€.
  • νŽ˜μ΄μ§€ 이동 μ‹œ Javascript λ‚΄μ˜ νŠΉμ • ν•¨μˆ˜λ₯Ό νƒ€μ„œ <div id="root" />의 λ‚΄μš©μ„ κ΅μ²΄ν•œλ‹€.
  • 초기 λ Œλ”λ§ ν›„ λ°μ΄ν„°λ§Œ λ°›μ•„μ˜€λ―€λ‘œ μƒλŒ€μ μœΌλ‘œ μ„œλ²„ μš”μ²­μ΄ 적닀.
  • Virtual DOM μ‚¬μš©
  • React의 경우 CRA을 톡해 webpack, babel 같은 λ³΅μž‘ν•œ μ„ΈνŒ…μ„ κ±°μΉ˜μ§€ μ•Šμ•„λ„ λœλ‹€.

πŸ’‘ MPA (Multiple Page Application)

  • SPA와 λ°˜λŒ€λ˜λŠ” κ°œλ…μœΌλ‘œ, νŽ˜μ΄μ§€ μžμ²΄κ°€ μ—¬λŸ¬κ°œλ‘œ μ§„ν–‰λ˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§ν•œλ‹€.
  • 각 νŽ˜μ΄μ§€λ₯Ό ν΄λ¦­ν•˜λ©΄ μ„œλ²„μ— μš”μ²­λ§Œ 보내고, μ„œλ²„μ—μ„œ μ‘λ‹΅ν•˜λ©΄ κ·Έ λ•Œ λΈŒλΌμš°μ €μ—μ„œ 보여쀀닀.

πŸ’‘ CSR (Client Side Rendering)

  • μ›Ή νŽ˜μ΄μ§€ λ Œλ”λ§μ΄ ν΄λΌμ΄μ–ΈνŠΈ(λΈŒλΌμš°μ €) μΈ‘μ—μ„œ μΌμ–΄λ‚˜λŠ” 것을 μ˜λ―Έν•œλ‹€.
  • ν΄λΌμ΄μ–ΈνŠΈλŠ” 졜초 μš”μ²­μ—μ„œ HTML, Javascript, CSS ν™•μž₯자 νŒŒμΌμ„ μ°¨λ‘€λŒ€λ‘œ λ‹€μš΄λ‘œλ“œν•˜λ©° 졜초 뢈러온 νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ€ λΉ„μ–΄μžˆλ‹€.(html, body νƒœκ·Έλ§Œ 쑴재)
  • Javascript 파일이 λ‹€μš΄λ‘œλ“œλœ λ‹€μŒ, ν•΄λ‹Ή 파일이 DOM을 HTML μœ„μ— 그리기 μ‹œμž‘ν•œλ‹€.
  • 졜초 호좜 λ•Œλ§Œ νŽ˜μ΄μ§€λ₯Ό λ°›μ•„μ˜€κ³  이후 ν™”λ©΄μ—μ„œ μΌμ–΄λ‚˜λŠ” λ³€ν™”λŠ” λ°μ΄ν„°λ§Œ μš”μ²­ν•œλ‹€.(ex: json)
  • SEO와 관련이 적은 μ–΄λ“œλ―Ό νŽ˜μ΄μ§€λ₯Ό κ°œλ°œν•  λ•Œ 주둜 μ‚¬μš©ν•œλ‹€.

πŸ’‘ SSR(Server Side Rendering)

  • νŽ˜μ΄μ§€λ₯Ό μ„œλ²„ λ‹¨κ³„μ—μ„œ ꡬ성 ν›„ μ‚¬μš©μžμ—κ²Œ λ³΄μ—¬μ£ΌλŠ” 것을 λ§ν•œλ‹€.
  • CSR에 λΉ„ν•΄ νŽ˜μ΄μ§€ μ†λ„λŠ” λŠ¦μ–΄μ§ˆ μˆ˜μžˆμ§€λ§Œ μ „μ²΄μ μœΌλ‘œ μ‚¬μš©μžμ—κ²Œ λ³΄μ—¬μ£ΌλŠ” μ½˜ν…μΈ  ꡬ성이 μ™„λ£Œλ˜λŠ” μ‹œμ μ€ 빨라져 UX μΈ‘λ©΄μ—μ„œ μœ λ¦¬ν•˜λ‹€.
  • 첫 νŽ˜μ΄μ§€μ— ꡬ성이 λΆˆν•„μš”ν•œ νŒŒμΌμ€ λ°›μ•„μ˜€μ§€ μ•Šκ³ , ν•„μš”ν•œ 정적인 λΆ€λΆ„λ§Œ μ²˜λ¦¬ν•˜κ³  동적인 뢀뢄은 ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ‘œλ“œν•œλ‹€.
  • CSR의 단점인 '첫 νŽ˜μ΄μ§€ 깑톡 μƒνƒœ'λ₯Ό 극볡할 수 μžˆλ‹€.
  • μ£Όμ˜ν• μ μ€ νŽ˜μ΄μ§€λ₯Ό 잘λͺ» ꡬ성할 μ‹œ CSR에 λΉ„ν•΄ μ„œλ²„ λΆ€ν•˜κ°€ μ»€μ§€κ±°λ‚˜ 첫 λ‘œλ”©μ΄ 맀우 λŠλ¦¬λ‹€.
  • 주둜 SEOκ°€ μ€‘μš”ν•œ 컀머슀λ₯Ό κ°œλ°œν•  λ•Œ 주둜 μ‚¬μš©ν•œλ‹€.

πŸ’‘ SEO (Search Engine Optimization)

  • 웹에 검색 ν–ˆμ„ λ•Œ, λ‚΄κ°€ λ§Œλ“  μ‚¬μ΄νŠΈκ°€ 잘 걸리도둝 ν•˜λŠ” 것이며 검색 엔진 μ΅œμ ν™”λΌκ³  ν•œλ‹€.

  • μ‰½κ²Œ 말해, λ‚΄κ°€ λ§Œλ“  μ‚¬μ΄νŠΈκ°€ μ’€ 더 μƒμœ„μ˜ 랭크λ₯Ό 받을 수 μžˆλ‹€κ³  μ–΄ν•„ν•˜λŠ” 것이닀.

  • CSR의 경우 μ΅œμ΄ˆμ—λŠ” νŽ˜μ΄μ§€μ— λ‚΄μš©μ΄ μ—†κΈ° λ•Œλ¬Έμ— 검색 λ…ΈμΆœμ΄ μ–΄λ ΅λ‹€.

  • SSR의 경우 νŽ˜μ΄μ§€λ₯Ό μ„œλ²„μ—μ„œ κ΅¬μ„±ν•œ ν›„ λ³΄μ—¬μ£ΌλŠ” 방식이기 λ•Œλ¬Έμ—, λ°”λ‘œ 쑰사 ν›„ 검색 λ…ΈμΆœμ΄ λœλ‹€.


결둠적으둜 μ„œλΉ„μŠ€μ˜ λͺ©μ μ— 따라 CSR, SSR을 μ ν•©ν•˜κ²Œ μ‚¬μš©ν•˜λŠ” 것이 κ°€μž₯ μ’‹λ‹€.

0개의 λŒ“κΈ€