[Spring] 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)

 

 

 

렌더링

• 렌더링이란, 요청해서 받은 내용을 브라우저 화면에 표시하는 것이다.

 

🔍 렌더링 과정

• Loader가 서버로부터 정보들을 불러온다.
• 파싱을 통해 문서를 DOM 트리로 만든다.
• DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다.
• CSS/설정 레이아웃 위치를 지정한다.
• 렌더링 트리가 그려진다.
• 렌더링을 받은 후에 웹으로 보여주는 방법이 2가지가 있다.
  • 서버 사이드 렌더링
  • 클라이언트 사이드 렌더링

 

 

---

 

서버 사이드 렌더링 (SSR)

• 서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다.
• 서버 사이드 렌더링은 페이지를 이동할 때 마다 새로운 페이지를 요청한다.
• 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.
• 서버에서 최종 HTML을 생성해서 클라이언트에 전달한다.
• HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달한다.
• 주로 정적인 화면에서 사용한다.
• 관련 기술 : JSP, 타임 리프
• 개발 주체 : 웹 백엔드 개발자

 

🔍 서버 사이드 렌더링 장점

• 검색엔진 최적화(SEO) 가능
  • 서버 사이드 렌더링을 통해 얻을 수 있는 가장 큰 장점이다.
• 성능 개선
  • 첫 렌더링된 html을 클라이언트에게 전달해 주기 때문에  초기 로딩 속도를 많이 줄일 수 있다.
  • 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있다.

 

🔍 서버 사이드 렌더링 단점

• 프로젝트의 복잡도가 높아진다.
• 페이지 이동시 화면이 깜빡 거린다.
• 서버 렌더링에 따른 서버 부하가 발생할 수 있다.
• 페이지 요청마다 페이지 새로고침이 발생한다.

 

---

 

클라이언트 사이드 렌더링 (CSR)

• 클라이언트에서 렌더링 하는 방법이다.
• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용한다.
• 주로 동적인 화면에서 사용한다.
• 웹 환경을 마치 앱 처럼 필요한 부분부분을 변경할 수 있다.
• 예) 구글 지도, Gmail, 구글 캘린더
• 관련 기술 : React, Vue.js
• 개발 주체 : 웹 프론트엔드 개발자

 

🔍 클라이언트 사이드 렌더링 장점

• 첫 요청할 때 한 개의 페이지만 불러온다.
• 그 후, 사용자의 행동에 따른 필요한 부분만 다시 요청하기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것 보다 빠른 인터렉션을 기대할 수 있다.
• 비동기 처리 가능
• 즉, 필요한 부분만 리로딩 없이 서버로부터 받아서 화면을 갱신할 수 있다.

 

🔍 클라이언트 사이드 렌더링 단점

• 초기 구동 속도가 느리다.
• 검색엔진 최적화가 어렵다.

 

---

 

SSR,  CSR 정리

•  SSR
  • 클라이언트가 요청할 때 마다 서버에서 새로운 페이지를 받아서 렌더링
    (전통적인 웹 페이지 구동 방식)
  • 특징 : 초기 로딩속도가 빠르지만, 서버에 부담
• CSR
  • 최초 빈 페이지를 서버에서 제공하고, View는 리소스들을 다운 받고 클라이언트에서 JS를 통해 렌더링
  • 서버에 부담이 적다.

 

✔ 백엔드 개발자 입에서 UI 기술

• 백엔드 - 서버 사이드 렌더링 기술
  • JSP, 타임리프(Thymeleaf)
    • 요새는 jsp보다 타임리프(Thymeleaf)를 더 많이 쓴다.
  • 화면이 정적이고, 복잡하지 않을 때 사용한다.
  • 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수
• 프론트 엔드 - 클라이언트 사이드 렌더링 기술
  • React, Vue.js
  • 복잡하고 동적인 UI 화면에 사용한다.
  •  웹 프론트엔트 개발자의 전문 분야
• 결국 백엔드 개발자는  서버 사이드 렌더링 기술은 학습해야하지만, 클라이언트 사이드 렌더링 기술은 선택적으로 공부하면 된다.

 

 

 

 

---

👀 참고 자료

https://velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)

 

 

https://gmlwjd9405.github.io/2018/12/21/template-engine.html

[Template Engine] 템플릿 엔진(Template Engine)이란 - Heee's Development Blog

 

https://velog.io/@neity16/6-%EC%8A%A4%ED%94%84%EB%A7%81-MVC-1-%EC%9B%B9-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EC%9D%B4%ED%95%B4-WAS-%EC%84%9C%EB%B8%94%EB%A6%BF-%EB%A9%80%ED%8B%B0-%EC%93%B0%EB%A0%88%EB%93%9C-CSR-SSR

[6] 스프링 MVC (1) - 웹 애플리케이션 이해 (WAS / 서블릿 / 멀티 쓰레드 / CSR, SSR)