JAVA

[JAVA] JSP와 μ„œλ²„μ‚¬μ΄λ“œλ Œλ”λ§(SSR)

girin_dev 2023. 4. 19. 17:30
728x90
λ°˜μ‘ν˜•

 

πŸ…  νšŒμ‚¬μ—μ„œ κΈ°μ‘΄ μ‹ κ·œ ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ ν•  λ•Œμ— μ–΄λ–€ λ°©μ‹μœΌλ‘œ κ°œλ°œν•  지에 λŒ€ν•΄ 잠깐 이야기 ν•œ 적이 μžˆλ‹€. 

 

λ‹¨μˆœνžˆ JSPλ₯Ό 개발 속도가 λΉ¨λΌμ„œ, κ°œλ°œμ— μ΅μˆ™ν•˜λ‹ˆκΉŒ. 기쑴에 ν–ˆλ˜ ν”„λ‘œμ νŠΈμ™€ λΉ„μŠ·ν•œ ꡬ쑰둜 κ°„λ‹€λ©΄ κ΅¬ν˜„μ΄ λΉ λ₯΄λ‹ˆκΉŒ.

λΌλŠ” 말에 납득을 ν•˜κΈ΄ν–ˆμ§€λ§Œ, ν•œνŽΈμœΌλ‘œλŠ” λ ˆκ±°μ‹œν•œ 방법을 μ“°λŠ”κ²Œ μ‹«λ‹€λΌλŠ” λ§‰μ—°ν•œ 생각이 μžˆμ—ˆλ‹€. 

 

κ·Έ μ™Έμ—λŠ”, 코틀린을 써보자 λ¦¬μ•‘νŠΈλ‘œ λ‚˜λˆ„μž. λ“±λ“± μ—¬λŸ¬ 의견이 μžˆμ—ˆλ‹€.

 

λŸ¬λ‹μ»€λΈŒλ₯Ό μ˜μ‹ν•˜μ§€ μ•Šκ³ , κ²°μ •λ§Œ λ‚΄λ¦°λ‹€κ³  ν•œλ‹€λ©΄. 

 

μ™œ λ ˆκ±°μ‹œλ₯Ό μ‹«μ–΄ν•˜λŠ”μ§€? μ™œ JSPκ°€ λ ˆκ±°μ‹œλΌλŠ” 인식을 κ°€μ‘ŒλŠ” μ§€, μƒκ°ν•΄λ΄€μ§€λ§Œ,

μ΄μœ λŠ” λͺ¨λ₯΄κ³  κ·Έλƒ₯ 잘 μ•ˆμ“°λ‹ˆκΉŒ, μš”μ¦˜ μ•ˆμ“°κΈ°λ„ ν•˜κ³ , κ·Έλƒ₯ ν”„λ‘ νŠΈ λ°± 뢄리가 μΆ”μ„Έλ‹ˆκΉŒλΌλŠ” 이유만 생각이 λ‚¬μ—ˆλ‹€. 

 

λ‚˜λŠ” μ™œ JSP에 거뢀감을 κ°€μ‘ŒλŠ”μ§€ μž₯단점을 νŒŒμ•…ν•΄μ„œ 이유λ₯Ό μ•Œμ•„λ³΄λ €κ³ ν•œλ‹€.

 

 


 

JSP(JavaServer Pages) λŠ” μžλ°” 기반 μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(SSR) 기술 쀑 ν•˜λ‚˜μ΄λ‹€. 

μ „μžμ •λΆ€λ‚˜ μ˜€λž˜μ „ ν”„λ‘œμ νŠΈλ₯Ό κ²½ν—˜ν•œ μ‚¬λžŒμ€ λ§Žμ΄λ“€ μ ‘ν–ˆμ„ 것이닀.

 

 

 

JSP의 μž₯점은 λ‹€μŒκ³Ό κ°™λ‹€.

 

  • Java 기반 ν”„λ ˆμž„μ›Œν¬μΈ Springκ³Ό μ—°κ³„ν•΄μ„œ μ‚¬μš©, Spring의 λ‹€μ–‘ν•œ κΈ°λŠ₯을 ν™œμš© κ°€λŠ₯.
  • ν΄λΌμ΄μ–ΈνŠΈμ™€μ˜ 톡신이 μ—†μœΌλ―€λ‘œ, λ³΄μ•ˆ μΈ‘λ©΄μ—μ„œ 높은 μˆ˜μ€€μ˜ μ•ˆμ •μ„± 제곡.
    • JSP 컴파일 - Servlet λ³€ν™˜ (컴파일 μ΄ν›„μ—λŠ” μ½”λ“œ μˆ˜μ •μ΄ λΆˆκ°€λŠ₯ν•˜λ―€λ‘œ,)
  • Java μ–Έμ–΄λ₯Ό μ“°λ―€λ‘œ, νƒ€μž… μ•ˆμ •μ„±μ΄ λ†’κ³  μ•ˆμ •μ μΈ μ½”λ“œ μž‘μ„± κ°€λŠ₯.
  • Java 기반의 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•  경우 μžμ—°μŠ€λŸ½κ²Œ 선택 κ°€λŠ₯.

 

JSP의 단점은 λ‹€μŒκ³Ό κ°™λ‹€. 

 

  • Java κΈ°λ°˜μ΄λ―€λ‘œ Java κ°œλ°œμžκ°€ μ•„λ‹Œκ²½μš°μ— 선택 어렀움.
  • μ½”λ“œκ°€ λ³΅μž‘ν•΄μ§€λ©΄ μœ μ§€λ³΄μˆ˜κ°€ μ–΄λ €μ›Œμ§ 
  • μš”μ²­λ§ˆλ‹€ νŽ˜μ΄μ§€λ₯Ό λ‹€μ‹œ λ Œλ”λ§ ν•˜λ―€λ‘œ, μ„œλ²„ λΆ€ν•˜ 증가

 

 


 

JSP의 단점 쀑, μ„œλ²„μ—μ„œμ˜ νŽ˜μ΄μ§€ λ Œλ”λ§μ€ λ‹¨μ λ§Œ μžˆμ§€λŠ” μ•Šλ‹€.

 

 

 

SSR (μ„œλ²„μ‚¬μ΄λ“œ λ Œλ”λ§)

 

  • μ„œλ²„ μΈ‘μ—μ„œ HTML을 μƒμ„±ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈμ— 전달
  • λ‘œλ”© 속도가 λΉ λ₯΄κ³ , 검색 μ—”μ§„ μ΅œμ ν™”μ— 유리
  • μ„œλ²„μ— λΆ€ν•˜ λ°œμƒ κ°€λŠ₯. μ„œλ²„μ—μ„œ HTML을 λ Œλ”λ§ ν•΄μ•Ό ν•˜λ―€λ‘œ, 초기 κ΅¬ν˜„ μ‹œκ°„μ΄ 였래 걸릴 수 있음.
  • 전체 νŽ˜μ΄μ§€ λ‘œλ”© ν›„ 변경점이 μžˆμ„ 경우 λ‹€μ‹œ 전체 νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•΄μ•Ό 함.

 

 

 

 

 

CSR (ν΄λΌμ΄μ–ΈνŠΈμ‚¬μ΄λ“œ λ Œλ”λ§)  / JSPλŠ” SSR 방식이닀.

 

  • ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ JavaScriptλ₯Ό 톡해 HTML 생성
  • 초기 λ‘œλ”© 느리고,. 검색엔진 μ΅œμ ν™”μ— 뢈리
  • μ„œλ²„ λΆ€ν•˜κ°€ 적고, 비동기 μ‹μœΌλ‘œ 변경사항 적용 κ°€λŠ₯.
  • ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ HTML을 μƒμ„±ν•˜λ―€λ‘œ, κ΅¬ν˜„ μ‹œκ°„μ΄ λΉ λ₯΄κ³ , SEO에 관계 μ—†λŠ” APP에 적합.

 

 

SEO(검색 μ—”μ§„ μ΅œμ ν™”)

검색엔진은 μ›Ή μ‚¬μ΄νŠΈμ˜ λ‚΄μš©μ„ 크둀링 - 검색 μΈλ±μŠ€μ— μΆ”κ°€ν•œλ‹€.

이후 μ‚¬μš©μžκ°€ 검색 ν•  λ•Œ, ν•΄λ‹Ή 검색어와 κ΄€λ ¨λœ λ‚΄μš©μ„ ν¬ν•¨ν•œ μ›Ή μ‚¬μ΄νŠΈλ₯Ό 검색 결과둜 보여쀀닀. 

SSR 방식은 μ„œλ²„μ—μ„œ HTML을 λ Œλ”λ§ν•˜μ—¬ λ³΄μ—¬μ£Όλ―€λ‘œ, 초기 λ‘œλ”©μ΄ λΉ λ₯΄κ³ , 검색 μ—”μ§„μ—μ„œ μ›Ή νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ„ μ‰½κ²Œ
읽을 수 μžˆμœΌλ―€λ‘œ λ…ΈμΆœμ— μœ λ¦¬ν•˜λ‹€. 

반면 CSR 방식은 초기 HTML이 λΉ„μ–΄ μžˆμœΌλ―€λ‘œ, 검색 μ—”μ§„μ—μ„œ νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ„ μΈμ‹ν•˜λŠ” 데에 어렀움이 μžˆλ‹€.

 

 

 

 

 

MSA ꡬ쑰의 ν”„λ‘œμ νŠΈμ—μ„œ ? 

    일반적으둜, MSA κ΅¬μ‘°μ—μ„œλŠ” μ„œλΉ„μŠ€κ°€ 각각 λ…λ¦½μ μ΄λ―€λ‘œ. μ„œλΉ„μŠ€κ°„ 톡신은 APIλ₯Ό 톡해 이루어진닀.

 λ”°λΌμ„œ, 각각 μ„œλΉ„μŠ€μ—μ„œ μ€‘λ³΅λ˜λŠ” μ½”λ“œκ°€ λ°œμƒν•  κ°€λŠ₯성이 λ†’λ‹€ 

    CSR 방식을 μ‚¬μš©ν•œλ‹€λ©΄, 각각의 μ„œλΉ„μŠ€μ—μ„œ 독립적인 λ Œλ”λ§ μ²˜λ¦¬κ°€ 되고, ν•„μš”ν•œ API λ³„λ‘œ 데이터λ₯Ό κ°€μ Έμ˜¬ 수 있기 λ•Œλ¬Έμ— μ„œλ²„μ˜ λΆ€ν•˜κ°€ 적어 μ§€λŠ” μž₯점이 μžˆλ‹€. 

 

이 외에 λ„€μ΄λ²„μ—μ„œ μš΄μ˜ν•˜λŠ” λΈ”λ‘œκ·ΈλŠ” SSR 방식을 μ“°λŠ”λ°, ( React, Nodeλ₯Ό μ‚¬μš©ν•΄μ„œ SSR을 κ΅¬ν˜„ν•΄μ„œ μ“°κ³  μžˆλ‹€λŠ” 점도 놀라웠닀. ) λ‹¨μˆœ νŠΈλ Œλ“œλ‚˜ 흐름에 따라 CSR을 κ³ μ§‘ν•˜κΈ° λ³΄λ‹€λŠ” SSR과의 차이(μœ μ§€λ³΄μˆ˜ μž₯단점도 쑴재) λ₯Ό μΈμ§€ν•˜κ³  μ„ νƒν•˜λŠ”κ²Œ λ§žλ‹€κ³  μƒκ°ν•œλ‹€.

 

https://d2.naver.com/helloworld/7804182

 

 

 

 

 

 

 

 

 

 

 

 

μ°Έκ³  :

https://d2.naver.com/helloworld/7804182

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

The Benefits of Server Side Rendering Over Client Side Rendering

Most of our pages on walmart.com are using server side rendering (henceforth SSR) with only a few unique exceptions.

medium.com

 

 

기술적 κ°€μŠ€λΌμ΄νŒ…μ€ 이제 λ©ˆμΆ°μ£Όμ„Έμš”

아직도 PHP 같은 κ±° μ¨μš”? 일전에 νŒ€ ν”„λ‘œμ νŠΈλ₯Ό ν•˜λ©΄μ„œ νŒ€μ› 쀑 ν•œ λͺ…이 아직도 PHP 같은 것을 쓰냐며 λ‚΄κ²Œ ν•€μž”μ„ μ€€ 일이 μžˆμ—ˆλ‹€. μžμ‹ μ€ Nestjs λ‚˜ μŠ€ν”„λ§λΆ€νŠΈλ₯Ό μ‚¬μš©ν•œλ‹€λ©° λ‹€λ₯Έ κΈ°μˆ μ„ λΉ„ν•˜ν•˜

pronist.dev

 

 

μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(Server Side Rendering, SSL)

μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(Server Side Rendering, SSR) 은 졜근 κ°œλ°œμžλ“€μ΄ μ§‘μ€‘ν•˜κ³ , κ°•μ‘°ν•˜λŠ” κΈ°μˆ μ΄λ‹€. λ„λŒ€μ²΄ μ–΄λ–€ 기술이며 μ™œ μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§μΈμ§€, μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§μ— λŒ€ν•œ 이둠을 κ³΅λΆ€ν•˜λ©° μ •

velog.io

 

 

 

320x100
λ°˜μ‘ν˜•