서버사이드 렌더링과 클라이언트 사이드 렌더링

서버 사이드 렌더링 (SSR: Server Side Rendering)

작동 방식

• 서버에서 HTML을 완전히 생성한 뒤, 클라이언트(브라우저)에 전달합니다.
• 브라우저는 서버에서 받은 완성된 HTML을 그대로 화면에 렌더링합니다.

특징

• 요청마다 서버에서 HTML을 생성하기 때문에 페이지 로딩 시 서버와의 통신이 중요합니다.
• 서버가 모든 렌더링 작업을 처리하므로 클라이언트의 부담이 적습니다.

장점

1. 빠른 초기 화면 표시: 사용자는 HTML이 완성된 상태로 받아보기 때문에 페이지 로딩 속도가 빠르게 느껴집니다.
2. SEO(검색 엔진 최적화)에 유리: 검색 엔진이 HTML을 바로 크롤링할 수 있어 검색 노출이 용이합니다.
3. 구형 브라우저 호환성: 자바스크립트 처리 능력이 약한 브라우저에서도 동작이 안정적입니다.

단점

1. 서버 부하: 모든 요청마다 서버에서 렌더링을 처리해야 하므로 대규모 트래픽을 처리할 때 부담이 큽니다.
2. 제한적인 사용자 경험: React와 같은 SPA(Single Page Applicaion)처럼 새로고침 없이 동작하는 부드러운 사용자 경험을 제공하기 어렵습니다.
3. 확장성 문제: 클라이언트와 서버 간 트래픽이 늘어날수록 서버 자원이 많이 소모됩니다.

---

클라이언트 사이드 렌더링 (CSR: Client Side Rendering)

작동 방식

• 서버는 HTML 뼈대와 자바스크립트 파일만 전달합니다.
• 브라우저는 자바스크립트를 실행해 필요한 데이터를 서버의 API로부터 가져오고, 그 데이터를 이용해 화면을 완성합니다.

특징

• 초기 로딩은 느리지만, 이후에는 새로고침 없이 동적인 화면을 제공할 수 있습니다.
• 렌더링 작업을 클라이언트(사용자의 브라우저)가 담당합니다.

장점

1. 동적인 사용자 경험 제공: 페이지 새로고침 없이 데이터를 갱신할 수 있어 사용성이 뛰어납니다.
2. 서버 부하 감소: 서버는 데이터를 제공하는 API 역할만 하므로 렌더링 작업이 줄어듭니다.
3. SPA 구현 가능: React, Vue.js 같은 프레임워크를 사용해 부드러운 상호작용과 효율적인 상태 관리를 구현할 수 있습니다.

단점

1. 초기 로딩 느림: 자바스크립트 파일 로딩과 실행 후 화면을 구성하므로 초기 렌더링이 느릴 수 있습니다.
2. SEO 문제: 검색 엔진이 자바스크립트를 실행하지 못하면 콘텐츠를 제대로 크롤링하지 못할 수 있습니다. (SSR, SSG를 추가적으로 활용하여 해결 가능)
3. 브라우저 성능 의존성: 사용자의 기기와 브라우저 성능이 낮으면 화면 렌더링이 느려질 수 있습니다.

---

SSR vs CSR 비교

항목	서버 사이드 렌더링 (SSR)	클라이언트 사이드 렌더링(CSR)
렌더링 위치	서버	클라이언트(브라우저)
초기 로딩 속도	빠름	느림
SEO 적합성	좋음	기본적으로 불리하지만 보완 가능
사용자 경험(UX)	정적 콘텐츠에 적합	동적 콘텐츠에 적합
서버 부하	높음	낮음
대표 기술	JSP, Thymeleaf, PHP	React, Vue.js, Angular

---

결론

• SSR은 SEO가 중요하거나 초기 로딩 속도가 중요한 웹사이트(뉴스, 블로그 등)에 적합합니다.
• CSR은 동적 콘텐츠가 많고 사용자와의 상호작용이 중요한 애플리케이션(SPA, 대시보드 등)에 적합합니다.
• 요즘은 SSR과 CSR의 장점을 결합한 혼합 방식(Hydration, SSG)도 많이 사용됩니다.