SSR / CSR

1. SSR

ssr

  • ServerSide Rendering의 μ•½μžλ‘œ μ„œλ²„λ‘œλΆ€ν„° css, html, jsλ“± μ™„μ „ν•œ λ¦¬μ†ŒμŠ€ νŒŒμΌμ„ λ°›μ•„μ™€μ„œ 화면을 λ Œλ”λ§ ν•˜λŠ” 방식

  • ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μš”μ²­μ„ λ°›μ„λ•Œλ§ˆλ‹€ μ„œλ²„λ‘œλΆ€ν„° 그에 ν•΄λ‹Ήν•˜λŠ” λ¦¬μ†ŒμŠ€ νŒŒμΌμ„ μ‘λ‹΅ν•˜μ—¬ λ°˜ν™˜, λ Œλ”λ§ μ‹œν‚¨λ‹€.

νŽ˜μ΄μ§€κ°€ λ³€κ²½ 될 λ•Œ λ§ˆλ‹€ μ„œλ²„μ—μ„œ λͺ¨λ“  λ¦¬μ†ŒμŠ€λ₯Ό λ°›μ•„ λ Œλ”λ§ ν•΄μ•Ό ν•œλ‹€.

  • μž₯점

    1. μ„œλ²„μ—μ„œ ν™”λ©΄ 전체λ₯Ό κ΅¬μ„±ν•΄μ„œ ν΄λΌμ΄μ–ΈνŠΈμ—κ²Œ 보내기 λ•Œλ¬Έμ— 초기 λ‘œλ”©μ΄ 빠름

    2. ν΄λΌμ΄μ–ΈνŠΈλŠ” λͺ¨λ“  λ¦¬μ†ŒμŠ€ νŒŒμΌμ„ λ°›μ•„ λ Œλ”λ§ν•˜λ―€λ‘œ SEO μ΅œμ ν™”κ°€ κ°€λŠ₯ν•˜λ‹€.

  • 단점

    1. νŽ˜μ΄μ§€ λ³€κ²½μ‹œ, λ™μΌν–ˆλ˜ 뢀뢄듀도 μ„œλ²„μ—μ„œ μƒˆλ‘œ 받아와야 ν•˜λ―€λ‘œ μ„±λŠ₯ μΈ‘λ©΄μ—μ„œ λΉ„νš¨μœ¨μ 

    2. λ‹€μˆ˜μ˜ μ‚¬μš©μžκ°€ μ΄μš©μ‹œ μ„œλ²„μ— λΆ€ν•˜κ°€ 많이 걸릴수 있음.

2. CSR

csr

  • ClientSide Rendering의 μ•½μžλ‘œ SSRκ³Ό λ°˜λŒ€λ˜λŠ” κ°œλ…μ΄λ‹€. 졜초 μš”μ²­μ‹œ 빈 html을 μ „μ†‘ν•˜κ³  ν•„μš”ν•œ λ¦¬μ†ŒμŠ€λ₯Ό μ„œλ²„λ‘œλΆ€ν„° 받아와 jsλ₯Ό ν†΅ν•˜μ—¬ λ™μ μœΌλ‘œ λ Œλ”λ§ν•œλ‹€.

  • 졜초 ν•œλ²ˆλ§Œ νŽ˜μ΄μ§€λ₯Ό 전체 λ‘œλ”©ν•˜κ³  μ΄ν›„μ—λŠ” λ°μ΄ν„°λ§Œ λ³€κ²½ν•˜μ—¬ μ‚¬μš©ν•œλ‹€.

  • μž₯점

    1. λ³€κ²½λ˜λŠ” λ¦¬μ†ŒμŠ€λ§Œ μš”μ²­ν•˜μ—¬ λ Œλ”λ§ ν•˜κΈ° λ•Œλ¬Έμ— λ›°μ–΄λ‚œ UXλ₯Ό 가진닀.

    2. ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λ Œλ”λ§μ„ μ‹€μ‹œν•˜κΈ° λ•Œλ¬Έμ— μ„œλ²„μΈ‘μ˜ λΆ€ν•˜κ°€ 적어진닀.

  • 단점

    1. 빈 html을 받아와 jsλ₯Ό ν†΅ν•˜μ—¬ λ Œλ”λ§ ν•˜κΈ° λ•Œλ¬Έμ—, SEO μ΅œμ ν™”κ°€ μ–΄λ ΅λ‹€.

    2. 졜초 빈 html에 데이터λ₯Ό 받아와 λ Œλ”λ§ ν•˜κΈ° λ•Œλ¬Έμ— 초기 λ‘œλ”©μ΄ λŠλ¦¬λ‹€

μš”μ•½

μš”μ•½
PreviousSession / JWTNextSSG

Last updated