← λͺ©λ‘μœΌλ‘œ
Rendering Strategies
rendering

μš”μ¦˜λ“€μ–΄ SSR에 κ΄€ν•œ 이야기가 많이 λ…ΈμΆœλ˜κ³  있고 μ‹€μ œ μ„œλΉ„μŠ€μ—μ„œ SEO의 μ€‘μš”μ„±μœΌλ‘œ μΈν•΄μ„œ SSR을 λ„μž…ν•˜λŠ” νšŒμ‚¬λ“€μ΄ λ§Žμ•„μ§€κ³  μžˆμŠ΅λ‹ˆλ‹€.

이에 따라 λ Œλ”λ§ μ „λž΅μ„ 정리해보고 각자 μ–΄λŠ 상황에 μ μ ˆν•˜κ²Œ 쓰일 수 μžˆλŠ”μ§€ νŒŒμ•…ν•΄ λ΄…μ‹œλ‹€.

SSR

SSR(Server Side Rendering)은 사싀 κ°€μž₯ 고전적인 λ Œλ”λ§ λ°©μ‹μž…λ‹ˆλ‹€. μ „ν˜€ μƒˆλ‘œμšΈκ²Œ μ—†λŠ” λ Œλ”λ§ λ°©μ‹μž…λ‹ˆλ‹€.

React의 λŒ€μ€‘ν™”λ‘œ CSR이 널리 μ‚¬μš©λ˜μ–΄μ„œ SSR이 μƒˆλ‘œμš΄ 기술둜 보일수 μžˆμ§€λ§Œ SSR은 사싀 고전적인 λ°©μ‹μž…λ‹ˆλ‹€.

μ„œλ²„λ₯Ό 개발 ν• λ•Œμ— νŠΉμ • APIμ—μ„œ html을 λ°˜ν™˜ν•¨μœΌλ‘œμ„œ μ‚¬μš©μžκ°€ νŽ˜μ΄μ§€λ₯Ό μš”μ²­ ν• λ•Œλ§ˆλ‹€ λ™μ μœΌλ‘œ λ Œλ”λ§ν•΄μ„œ ν΄λΌμ΄μ–ΈνŠΈμ—κ²Œ μ „λ‹¬ν–ˆμŠ΅λ‹ˆλ‹€.

μ˜ˆμ „ 방식은 Srping Boot와 같은 ν”„λ ˆμž„μ›Œν¬μ—μ„œ html을 λ°˜ν™˜ν•˜κ³  νŠΉλ³„ν•œ ν…œν”Œλ¦Ώ μ–Έμ–΄λ₯Ό μ΄μš©ν•΄ html에 데이터λ₯Ό λ°”μΈλ”©ν•˜μ—¬ ν‘œμΆœν•˜λŠ” λ°©μ‹μ΄μ˜€μŠ΅λ‹ˆλ‹€.

ν˜„λŒ€μ— λ“€μ–΄μ„œλŠ” Next.js와 같은 ν”„λ ˆμž„μ›Œν¬λ“€μ΄ λ“±μž₯ν•¨μœΌλ‘œμ„œ μ„œλ²„ ν”„λ ˆμž„μ›Œν¬μ™€ λΆ„λ¦¬λ˜μ–΄ ν”„λ‘ νŠΈμ—”λ“œμ— νŠΉν™”λœ SSR을 μˆ˜ν–‰ ν•  수 μžˆλ„λ‘ μ΅œμ ν™” λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

Next.js와 같은 ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜μ—¬ SSR을 μˆ˜ν–‰ν• λ•Œ κ°€μž₯ 큰 μž₯점은 μ„œλ²„μ—μ„œ μˆ˜ν–‰ν•  λΆ€λΆ„κ³Ό ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μˆ˜ν–‰ ν•  뢀뢄을 λ‚˜λˆ„μ–΄μ„œ λ Œλ”λ§ ν•  수 μžˆλ‹€λŠ” μ μž…λ‹ˆλ‹€.

κΈ°μ‘΄ 방식은 μ„œλ²„μ—μ„œ λͺ¨λ‘ ν•œλ²ˆμ— λ Œλ”λ§λ˜μ–΄μ„œ μ„œλ²„κ°€ λ Œλ”λ§ν•˜λŠ” λ™μž‘ μžμ²΄κ°€ 뢀담이 될 수 μžˆμ—ˆλŠ”λ° 이λ₯Ό ν΄λΌμ΄μ–ΈνŠΈμ™€ 적절히 λ Œλ”λ§μ„ λ‚˜λˆ”μœΌλ‘œμ„œ μ΅œμ ν™” ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κ·Έλ ‡κΈ° λ•Œλ¬Έμ— SSR둜 개발 ν•  λ•Œμ—λŠ” λͺ¨λ‘ μ„œλ²„μ—μ„œ λ Œλ”λ§ ν•˜λŠ”κ²ƒλ„, λͺ¨λ‘ ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λ Œλ”λ§ν•˜λŠ” 것도 λ§žμ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 적절히 μ—­ν™œμ— 따라 μ„œλ²„ λ˜λŠ” ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λ‚˜λˆ„μ–΄μ„œ λ Œλ”λ§ 될 수 μžˆλ„λ‘ ν•΄μ•Όν•©λ‹ˆλ‹€.

CSR

ν˜„λŒ€ ν”„λ‘ νŠΈμ—”λ“œλ₯Ό λ°œμ „ μ‹œν‚¨ λ°©μ‹μž…λ‹ˆλ‹€. κΈ°μ‘΄μ—λŠ” λͺ¨λ‘ SSR을 μ΄μš©ν•΄μ„œ 화면을 κ°œλ°œν•˜μ˜€λŠ”λ°, CSR이 λ“±μž₯ν•¨μœΌλ‘œμ„œ ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ 화면을 λ Œλ”λ§ ν•  수 μžˆλ‹€λŠ” λ°©ν–₯으둜 인식을 λ°”κΎΈμ–΄ λ†“μ•˜μŠ΅λ‹ˆλ‹€.

κ·Έκ²ƒμ˜ 일등곡식은 λ‹Ήμ—°νžˆ React μ˜€κ³  λΉ„μŠ·ν•œ κ³„μ—΄μ˜ ν”„λ ˆμž„μ›Œν¬λ‘œλŠ” Angular.js 등이 μžˆμŠ΅λ‹ˆλ‹€.

SSG

SSR은 μ„œλ²„μ—μ„œ μ‚¬μš©μžμ˜ μš”μ²­ λ•Œλ§ˆλ‹€ 맀번 μƒˆλ‘­κ²Œ λ Œλ”λ§μ„ ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈμ—κ²Œ λ°˜ν™˜ν•©λ‹ˆλ‹€. μ΄λŠ” 정적인 μ»¨ν…μΈ μ—κ²ŒλŠ” 였히렀 λΆˆν•„μš”ν•œ μž‘μ—…μΌ 수 μžˆμŠ΅λ‹ˆλ‹€.

μ™œλƒν•˜λ©΄ 컨텐츠가 맀번 λ™μΌν•œλ° μ‚¬μš©μžμ˜ μš”μ²­ λ•Œλ§ˆλ‹€ λ™μΌν•œ 컨텐츠λ₯Ό μ„œλ²„μ—μ„œ λ§Œλ“€κ²ƒμ΄κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

μ΄λŸ¬ν•œ 문제λ₯Ό 효율적으둜 μ²˜λ¦¬ν•˜κΈ° μœ„ν•΄μ„œ λΉŒλ“œνƒ€μž„μ— μ•„μ˜ˆ λ Œλ”λ§ 결과물을 λ§Œλ“€μ–΄λ‚΄μ„œ μ‚¬μš©μžμ˜ μš”μ²­ λ•Œμ—λŠ” ν•΄λ‹Ή λΉŒλ“œνƒ€μž„μ— λ§Œλ“€μ–΄ λ‚Έ 결과물을 κ·ΈλŒ€λ‘œ λ°˜ν™˜ν•˜μ—¬ μ„œλ²„μ—μ„œ λ Œλ”λ§ν•˜λŠ” λ¦¬μ†ŒμŠ€λ₯Ό 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.

μš”μ¦˜μ€ Next.jsμ—μ„œλŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό λΆ„μ„ν•΄μ„œ SSG ν•  수 μžˆλŠ” μ»΄ν¬λ„ŒνŠΈλŠ” λΉŒλ“œν•΄μ„œ λ Œλ”λ§ 결과물을 가지고 있고, SSGλ₯Ό μˆ˜ν–‰ν•˜μ§€ λͺ»ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμ— λŒ€ν•΄μ„œλŠ” SSR둜 λ™μž‘ν•˜λ„λ‘ ν•©λ‹ˆλ‹€.

ISR

SSRκ³Ό SSGλŠ” 각각 μž₯점이 μžˆλŠ”λ° SSGλŠ” λΉŒλ“œνƒ€μž„μ— λΉ λ₯΄κ²Œ 컨텐츠λ₯Ό λ§Œλ“€μ–΄λ‘ μœΌλ‘œμ„œ ν΄λΌμ΄μ–ΈνŠΈκ°€ λΉ λ₯Έ λ‘œλ”©μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€. κ·Έλ ‡κΈ° λ•Œλ¬Έμ— SSRκ³Ό μƒλŒ€μ μœΌλ‘œ λ Œλ”λ§ μ„œλ²„μ˜ λΆ€ν•˜λ„ μ€„μ–΄λ“­λ‹ˆλ‹€. 그리고 SSR은 μš”μ²­λ§ˆλ‹€ λ™μ μœΌλ‘œ λ Œλ”λ§ν•˜λ―€λ‘œ μ΅œμ‹  데이터λ₯Ό λ°˜μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

그런데 λ§Œμ•½ 정적인 μ»¨ν…ŒμΈ κ°€ μ‘°κΈˆμ”© μ‹œκ°„μ— 따라 λ³€ν•˜λŠ” 화면이라면 μ–΄λ–¨κΉŒμš”? 이런 경우 맀번 λ™μ μœΌλ‘œ λ Œλ”λ§ν•˜λŠ” 것은 λΆˆν•„μš”ν•˜λ‚˜ λ•Œλ•Œλ‘œ μ΅œμ‹ μ˜ 데이터λ₯Ό λ°˜μ˜ν•΄μ•Όν•©λ‹ˆλ‹€.

μ΄λŸ¬ν•œ μš”κ΅¬μ‚¬ν•­μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄μ„œ SSG둜 λ Œλ”λ§μ„ ν•˜κ³  일정 간격에 따라 λ Œλ”λ§ μ„œλ²„μ—μ„œ λ°±κ·ΈλΌμš΄λ“œ μž‘μ—…μœΌλ‘œ 정적인 컨텐츠λ₯Ό μ΅œμ‹  데이터λ₯Ό λ°˜μ˜ν•˜μ—¬ μ—…λ°μ΄νŠΈ ν•©λ‹ˆλ‹€.

μ΄λ ‡κ²Œ λ™μž‘ν•˜λ―€λ‘œμ¨ SSG의 μž₯점을 κ°€μ Έκ°€λ©΄μ„œ μ΅œμ‹  데이터λ₯Ό 반영 ν•  수 있게 λ©λ‹ˆλ‹€. ISR은 Next.jsμ—μ„œ 처음 λ„μž…λœ κ°œλ…μœΌλ‘œμ„œ 점차 λ§Žμ€ ν”„λ ˆμž„μ›Œν¬μ—μ„œ μ§€μ›ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

방식에 λ”°λ₯Έ ν”„λ ˆμž„μ›Œν¬ 선택

μ΄λŸ¬ν•œ λ Œλ”λ§ 방식듀이 μžˆμ„ λ•Œ, 각각 μ–΄λ–€ ν”„λ ˆμž„μ›Œν¬κ°€ 쒋은 μ„ νƒμΌκΉŒ 생각해보면, 사싀 μ§€κΈˆκΉŒμ§€λŠ” 이 λ Œλ”λ§ 방식을 λͺ¨λ‘ μ§€μ›ν•˜λŠ” Next.jsκ°€ 쒋은 선택이 될 수 μžˆμŠ΅λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ λͺ¨λ‘ μ§€μ›ν•œλ‹€κ³  ν•΄μ„œ μ΅œμ„ μ˜ 선택은 μ•„λ‹ˆλ©΄ λ§Œμ•½ νŠΉμ •ν•œ λ°©μ‹μœΌλ‘œλ§Œ λ Œλ”λ§ν•΄μ•Ό ν•œλ‹€λ©΄ 각 방식에 μ΅œμ ν™”λœ ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜λŠ”κ²ƒλ„ 쒋을 κ²ƒμž…λ‹ˆλ‹€.