SSR vs CSR

💡 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 기본적인 차이점과 실제 웹 애플리케이션에서 두 기술이 혼합되어 사용되는 일반적인 상황을 간력하게 요약해보자

✨ SSR

@Controller + View Template -> 서버 측에서 화면을 동적으로 그린다.

SSR(Server-Side Rendering) : 웹 페이지의 콘텐츠를 서버에서 생성하여 클라이언트로 전송하는 방식이다.

@Controller : Spring MVC에서 HTTP 요청을 처리하고 요청을 받아 필요한 데이터를 처리하고, 뷰 템플릿에 데이터를 전달하여 HTML을 생성한다.

View Template (ex. Thymeleaf,JSP, Freemarker) : HTML 뼈대 안에 동적인 데이터를 삽입하여 최정적인 HTML을 생성하는 템플릿 엔진이다. 서버 측에서 템플릿 엔진을 사용하여 데이터를 HTML에 결합한다.

동작 방식

1. 클라이언트가 서버에 페이지 요청
2. 서버는 요청을 처리하고 필요한 데이터를 가져온다.
3. 서버는 뷰 템플릿과 데이터를 사용하여 HTML 페이지를 생성
4. 서버는 생성된 HTML 페이지를 클라이언트로 전송
5. 클라이언트는 서버에서 받은 HTML을 그대로 화면에 표시.

장점

SEO(검색 엔진 최적화) 유리 : 검색 엔진 크롤러가 HTML 콘텐츠를 수비게 읽을 수 있다.

초기 로딩 속도 빠름 : 서버에서 완성된 HTML을 보내주므로 초기 화면을 빠르게 표시 할 수 있다.

단점

서버 부하 증가 : 매번 페이즈 요청마다 서버에서 HTML을 생성해야 하므로 서버 부하가 증가할 수 있다.

페이지 전환시 깜빡임 : 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아와야 하므로 깜빡임을 발생할 수 있다.

✨ CSR

@RestController + Data -> 클라이언트 측에서 화면을 동적으로 그린다.

CSR(Client-Side Rendering) : 웹 페이지의 뼈대(HTML)와 JavaScript 파일을 서버에서 받아온 후, JavaScript를 사용하여 클라이언트(브라우저) 측에서 화면을 동적으로 생성하는 방식

@RestController : Spring MVC에서 REST API를 만들 때 사용하는 어노테이션. JavaScript를 사용하여 클라이언트(브라우저) 측에서 화면을 동적으로 생성하는 방식.

Data(JSON, XML) : 서버는 클라이언트에게 화면을 구성하는 데 필요한 데이터만 제공.

동작 방식

1. 클라이언트가 서버에 페이지 요청
2. 서버는 최소한의 HTML 뼈대와 JavaScript 파일을 클라이언트로 전송
3. 클라이언트 JavaScript 파일을 실행하여 서버에 데이터를 요청.
4. 서버는 데이터를 JSON 또는 XML 형식으로 클라이언트에 전송
5. 클라이언트는 받은 데이터를 사용하여 HTML을 동적으로 생성하고 화면에 표시.

장점

빠른 페이지 전환 : 필요한 데이터만 서버에서 받아오기 때문에 페이지 전환 속도가 빠르다.

풍부한 사용자 경험 : JavaScript를 사용하여 다양한 인터랙티브한 기능을 구현할 수 있다.

단점

SEO 불리 : 검색 엔진 크롤러가 JavaScript를 실행해야 콘턴체를 읽을 수 있어 SEO에 불리할 수 있다.

초기 로딩 속도 느림 : JavaScript 파일을 다운로드하고 실행해야 화면이 표시되므로 초기 로딩속도가 느릴 수 있다.

실제로는 두 가지 기술이 함께 사용!!

💡 혼합 방식 : 웹 어플래케이션은 SSR 과 CSR 의 장점을 모두 활용하기 위해 두 가지 기술을 혼합하여 사용하는 경우가 많다.

초기 로딩 및 SEO가 중요한 페이지 (예: 메인 페이지, 상품 상세 페이지): SSR을 사용하여 초기 화면을 빠르게 표시하고 검색 엔진 최적화를 수행.

사용자 인터랙션이 많은 페이지 (예: 댓글 기능, 쇼핑 카트): CSR을 사용하여 빠른 페이지 전환과 풍부한 사용자 경험을 제공.

구현 방법

Next.js, Nuxt.js : React 또는 Vue.js 기반의 SSR 프레임워크를 사용하여 SSR과 CSR을 쉽게 구현할 수 있다.

Spring Boot + React/Vue.js : Spring Boot를 사용하여 API 서버를 구축하고, React 또는 Vue.js를 사용하여 클라이언트 측 화면을 개발. 필요에 따라 SSR을 적용할 수 있다.

결론

요구사항에 따라 적절한 기술을 선택하거나 혼합하여 사용하는 것이 바람직하다.