📌SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)은 웹 애플리케이션에서 페이지를 렌더링하는 두 가지 주요 방식입니다.
SSR(Server-side Rendering)
SSR은 웹 애플리케이션의 페이지가 서버에서 미리 렌더링되어 클라이언트에게 HTML로 전달되는 방식입니다. 사용자가 요청을 보내면, 서버는 요청에 대한 결과를 포함한 완성된 HTML 페이지를 생성하여 브라우저에 보내게 됩니다.
장점
- SEO 최적화 : 검색 엔진이 페이지 콘텐츠를 쉽게 크롤링할 수 있어 SEO에 유리합니다.
- 빠른 초기 로드 속도 : 페이지의 최초 로드 시 바로 콘텐츠가 표시되어 사용자 경험이 향상됩니다.
- 호환성 : JavaScript가 비활성화된 브라우저에서도 기본적으로 콘텐츠를 볼 수 있습니다.
단점
- 서버 부하 : 모든 렌더링을 서버에서 처리하므로 서버에 더 많은 부담이 발생할 수 있습니다.
- 느린 동적 상호작용 : 페이지가 새로 고쳐질 때마다 서버에 요청을 해야 하므로 사용자 인터랙션이 느릴 수 있습니다.
- 비용 : 서버 리소스 사용량이 많아질 수 있어 운영 비용이 증가할 수 있습니다.
@RequestMapping(value="/main")
public String ssrPage(Model model){
model.addAttribute("msg","Hello!");
return "index.jsp";
}위와같이 index.jsp를 호출하고
<!-- index.jsp -->
<div>
${msg}
</div>다음 jsp를 불러올 때 해당 html이 모두 렌더링된 후 클라이언트에게 보여지게 됩니.
Hydration
SSR방식을 사용할 때 서버에서 HTML이 전부 로드된 후 클라이언트에게 보여질 때 자바스크립트를 통해 추가적인 기능(예: 이벤트 처리, 상태 관리 등)을 활성화하는 과정을 하이드레이션이라고 합니다.
하이드레이션은 SSR의 핵심 요소로, 사용자에게 빠르고 상호작용이 가능한 경험을 제공하는 데 중요한 역할을 합니다. 이 과정을 통해 페이지는 한 번의 서버 사이드 렌더링 후 JavaScript를 통해 동적인 기능을 유지하게 됩니다.
CSR (Client-Side Rendering)
CSR은 웹 애플리케이션의 페이지가 클라이언트(브라우저)에서 JavaScript를 사용하여 렌더링되는 방식입니다. 서버는 기본적인 HTML 틀만 제공하고, 클라이언트가 필요한 콘텐츠를 API를 통해 비동기적으로 가져와 렌더링합니다.
장점
- 거리로부터의 저항 : 클라이언트에서 모든 렌더링을 처리하기 때문에 서버의 부담이 줄어듭니다.
- 빠른 상호작용 : 페이지 내에서 동적인 콘텐츠 업데이트가 가능하여 사용자 경험이 향상됩니다.
- 더 많은 사용자 상호작용 : SPA(단일 페이지 애플리케이션)의 특성을 활용하여 부드러운 탐색 경험을 제공합니다.
단점
- SEO 최적화 문제 : 검색 엔진이 JavaScript에 의존하므로 페이지 내용이 제대로 크롤링되지 않을 수 있습니다.
- 초기 로딩 속도 : 페이지가 로드될 때 모든 자바스크립트를 불러와야 하므로 초기 로딩 시간이 길어질 수 있습니다.
- JavaScript 의존성 : JavaScript가 비활성화된 경우 페이지가 제대로 표시되지 않을 수 있습니다.
<div class="targetDiv">
Hello!
</div>위의 코드가 있을 때
setTimeout(function(){
$(".targetDiv").html("GoodBye!");
},1000);해당 코드를 실행하면 클라이언트가 화면을 보고있는 상황에서 1초 후에 Hello!가 GoodBye!로 바뀌게 됩니다.
이렇게 비동기적으로 데이터가 처리되는 상황을 간단한 예로 들 수 있습니다.
