JSP
서버 사이드 렌더링 (SSR)
- 정의: 서버 사이드 렌더링에서는 서버에서 최종 HTML 문서를 생성하여 클라이언트(브라우저)로 전송합니다. 클라이언트는 이를 받아서 바로 렌더링합니다.
- 예시: Spring과 JSP를 사용하는 전통적인 웹 애플리케이션은 SSR에 속합니다. 서버에서 데이터를 바탕으로 HTML 문서를 완성하고, 이 완성된 문서를 클라이언트에게 전달합니다.
- 장점: 초기 페이지 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리합니다. 왜냐하면 크롤러가 페이지의 완성된 형태를 쉽게 분석할 수 있기 때문입니다.
- 단점: 사용자와의 상호작용이 많은 페이지에서는 서버에 매번 요청을 보내고 응답을 받는 과정이 필요하므로, 이로 인해 발생하는 로딩 시간이 사용자 경험을 저하시킬 수 있습니다.
Vue.js
클라이언트 사이드 렌더링 (CSR)
- 정의: 클라이언트 사이드 렌더링에서는 서버로부터 데이터만 전송받고, 이 데이터를 바탕으로 클라이언트(브라우저)에서 HTML 문서를 생성합니다. 주로 자바스크립트를 사용하는 프레임워크(예: React, Vue.js)에서 볼 수 있습니다.
- 장점: 한 번의 페이지 로딩 이후에는 사용자와의 상호작용에 따라 필요한 데이터만 서버로부터 가져와 동적으로 페이지를 갱신할 수 있어, 사용자 경험이 향상됩니다.
- 단점: 초기 로딩 시에는 모든 자바스크립트 라이브러리와 데이터를 불러와야 하므로 시작 속도가 느릴 수 있습니다. 또한, 자바스크립트가 실행되기 전까지는 페이지의 내용이 비어 있기 때문에 검색 엔진 최적화(SEO)에 불리할 수 있습니다. 하지만 이를 해결하기 위한 다양한 기술들(예: 서버 사이드 렌더링(SSR)을 지원하는 Next.js 등)이 개발되고 있습니다.
댓글