# CSR & SSR



CSR : Client Side Rendering

SSR : Server Side Rendering

CSRμ—λŠ” λͺ¨λ°”일 μ‹œλŒ€μ— λ“€μ–΄μ„œ SPAκ°€ λ“±μž₯ν–ˆλ‹€.

# SPA(Single Page Applictaion)

졜초 ν•œ 번 νŽ˜μ΄μ§€ 전체λ₯Ό λ‘œλ”©ν•œ λ’€, λ°μ΄ν„°λ§Œ λ³€κ²½ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜

SPAλŠ” 기본적으둜 νŽ˜μ΄μ§€ λ‘œλ“œκ°€ μ—†κ³ , λͺ¨λ“  νŽ˜μ΄μ§€κ°€ λ‹¨μˆœνžˆ Html5 History에 μ˜ν•΄ λ Œλ”λ§λœλ‹€.


기쑴의 전톡적 방법인 SSR λ°©μ‹μ—λŠ” μ„±λŠ₯ λ¬Έμ œκ°€ μžˆμ—ˆλ‹€.

μš”μ¦˜ μ›Ήμ—μ„œ μ œκ³΅λ˜λŠ” 정보가 μ›Œλ‚™ λ§Žλ‹€. μš”μ²­ν•  λ•Œλ§ˆλ‹€ μƒˆλ‘œκ³ μΉ¨μ΄ μΌμ–΄λ‚˜λ©΄μ„œ νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•  λ•Œλ§ˆλ‹€ μ„œλ²„λ‘œλΆ€ν„° λ¦¬μ†ŒμŠ€λ₯Ό 전달받아 ν•΄μ„ν•˜κ³ , 화면에 λ Œλ”λ§ν•˜λŠ” 방식인 SSR은 데이터가 λ§Žμ„ 수둝 μ„±λŠ₯λ¬Έμ œκ°€ λ°œμƒν–ˆλ‹€.

ν˜„μž¬ μ£Όμ†Œμ—μ„œ λ™μΌν•œ μ£Όμ†Œλ₯Ό κ°€λ¦¬ν‚€λŠ” λ²„νŠΌμ„ λˆŒλ €μ„ λ•Œ,
μ„€μ •νŽ˜μ΄μ§€μ—μ„œ ν•„μš”ν•œ 데이터λ₯Ό λ‹€μ‹œ κ°€μ Έμ˜¬ 수 μ—†λ‹€.

μ΄λŠ”, μΈν„°λž™μ…˜μ΄ λ§Žμ€ ν™˜κ²½μ—μ„œ λΉ„νš¨μœ¨μ μ΄λ‹€. λ Œλ”λ§μ„ μ„œλ²„μͺ½μ—μ„œ μ§„ν–‰ν•˜λ©΄ 그만큼 μ„œλ²„ μžμ›μ΄ 많이 μ‚¬μš©λ˜κΈ° λ•Œλ¬Έμ— λΆˆν•„μš”ν•œ νŠΈλž˜ν”½μ΄ λ‚­λΉ„λœλ‹€.


CSR 방식은 μ‚¬μš©μžμ˜ 행동에 따라 ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ‹€μ‹œ μ½μ–΄μ˜¨λ‹€. λ”°λΌμ„œ μ„œλ²„ μΈ‘μ—μ„œ λ Œλ”λ§ν•˜μ—¬ 전체 νŽ˜μ΄μ§€λ₯Ό λ‹€μ‹œ μ½μ–΄λ“€μ΄λŠ” 것보닀 λΉ λ₯Έ μΈν„°λ ‰μ…˜μ„ κΈ°λŒ€ν•  수 μžˆλ‹€. μ„œλ²„λŠ” 단지 JSON파일만 보내주고, HTML을 κ·Έλ¦¬λŠ” 역할은 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 톡해 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μˆ˜ν–‰ν•˜λŠ” 방식이닀.


λ·° λ Œλ”λ§μ„ μœ μ €μ˜ λΈŒλΌμš°μ €κ°€ λ‹΄λ‹Ήν•˜κ³ , λ¨Όμ € 웹앱을 λΈŒλΌμš°μ €μ—κ²Œ λ‘œλ“œν•œ λ‹€μŒ ν•„μš”ν•œ λ°μ΄ν„°λ§Œ 전달받아 λ³΄μ—¬μ£ΌλŠ” CSR은 νŠΈλž˜ν”½μ„ κ°μ†Œμ‹œν‚€κ³ , μ‚¬μš©μžμ—κ²Œ 더 λ‚˜μ€ κ²½ν—˜μ„ μ œκ³΅ν•  수 μžˆλ„λ‘ 도와쀀닀.



# CSR μž₯단점

  • # μž₯점

    • νŠΈλž˜ν”½ κ°μ†Œ

      ν•„μš”ν•œ λ°μ΄ν„°λ§Œ λ°›λŠ”λ‹€

    • μ‚¬μš©μž κ²½ν—˜

      μƒˆλ‘œκ³ μΉ¨μ΄ λ°œμƒν•˜μ§€ μ•ŠμŒ. μ‚¬μš©μžκ°€ λ„€μ΄ν‹°λΈŒ μ•±κ³Ό 같은 κ²½ν—˜μ„ ν•  수 있음

  • # 단점

    • 검색 엔진

      ν¬λ‘¬μ—μ„œ λ¦¬μ•‘νŠΈλ‘œ λ§Œλ“  μ›Ήμ•± μ†ŒμŠ€λ₯Ό ν™•μΈν•˜λ©΄ λ‚΄μš©μ΄ λΉ„μ–΄μžˆμŒ. 이처럼 검색엔진 ν¬λ‘€λŸ¬κ°€ 데이터 μˆ˜μ§‘μ— 어렀움이 μžˆμ„ κ°€λŠ₯μ„± 쑴재

      ꡬ글 검색엔진은 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 λ‚΄μž₯λ˜μ–΄μžˆμ§€λ§Œ, λ„€μ΄λ²„λ‚˜ λ‹€μŒ λ“± 검색엔진은 크둀링에 어렀움이 μžˆμ–΄ SSR을 λ”°λ‘œ κ΅¬ν˜„ν•΄μ•Όν•˜λŠ” λ²ˆκ±°λ‘œμ›€ 쑴재


# SSR μž₯단점

  • # μž₯점

    • 검색엔진 μ΅œμ ν™”

    • μ΄ˆκΈ°λ‘œλ”© μ„±λŠ₯κ°œμ„ 

      첫 λ Œλ”λ§λœ HTML을 ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ 전달해주기 λ•Œλ¬Έμ— μ΄ˆκΈ°λ‘œλ”©μ†λ„λ₯Ό 많이 μ€„μ—¬μ€Œ

  • # 단점

    • ν”„λ‘œμ νŠΈ λ³΅μž‘λ„

      λΌμš°ν„° μ‚¬μš©ν•˜λ‹€λ³΄λ©΄ λ³΅μž‘λ„κ°€ λ†’μ•„μ§ˆ 수 있음

    • μ„±λŠ₯ μ•…ν™” κ°€λŠ₯μ„±



# [참고 자료]

μ΅œμ’… μˆ˜μ • : 6/29/2020, 12:00:23 PM