SSR, CSR 방식의 장단점과 특징

SSR (Server-Side Rendering)과 CSR (Client-Side Rendering)은 웹 애플리케이션을 렌더링하는 두 가지 방식으로, 각각 고유한 장점과 단점이 있습니다.

1. SSR (Server-Side Rendering)

SSR은 웹 페이지의 HTML을 서버에서 미리 생성하여 클라이언트(브라우저)로 전달하는 방식입니다. 사용자가 페이지를 요청하면, 서버가 HTML을 렌더링하고 클라이언트로 전송합니다.

특징

• HTML은 서버에서 완성된 형태로 전달됨
• 클라이언트 측에서 별도의 JavaScript 로직이 없더라도 페이지가 바로 보임

장점

• 빠른 초기 로드 시간: 서버에서 완성된 HTML을 전송하기 때문에 초기 로딩이 빠릅니다. 특히 저사양 기기나 느린 네트워크 환경에서 이점이 큽니다.
• SEO 최적화: 검색 엔진 크롤러가 페이지를 쉽게 읽고 인덱싱할 수 있어 검색 엔진 최적화(SEO)에 유리합니다.
• 더 나은 첫 화면 제공: 사용자는 초기 로딩에서 완전한 HTML 페이지를 받아 화면이 빠르게 표시됩니다.

단점

• 서버 부하 증가: 요청할 때마다 서버가 HTML을 렌더링하기 때문에 트래픽이 많을수록 서버의 부하가 증가합니다.
• 인터랙티브 지연: HTML은 빠르게 렌더링되지만, JavaScript가 실행되기 전까지는 페이지가 완전히 인터랙티브하지 않을 수 있습니다.
• 동적 컨텐츠 처리: 자주 업데이트되는 실시간 데이터를 처리하는 데 적합하지 않을 수 있습니다.

---

2. CSR (Client-Side Rendering)

CSR은 초기에는 빈 HTML만 서버에서 전송하고, JavaScript가 로드된 후 클라이언트 측에서 페이지를 렌더링하는 방식입니다. 주로 React, Vue.js, Angular 같은 SPA(Single Page Application)에서 사용됩니다.

특징

• HTML 파일 자체는 간단하고, 대부분의 UI가 JavaScript로 렌더링됨
• 클라이언트가 JavaScript로 데이터를 받아와 페이지를 구성

장점

• 서버 부하 감소: 클라이언트 측에서 렌더링이 이루어지므로 서버 부하가 적습니다.
• 역동적인 사용자 경험: 실시간 데이터를 처리하거나, 사용자가 많이 상호작용하는 애플리케이션에 적합합니다. 페이지 새로 고침 없이도 부분적인 UI 업데이트가 가능해 사용자 경험이 향상됩니다.
• 개발 생산성: 코드 재사용성과 구조화된 데이터 흐름을 통해 개발이 편리합니다. 특히 SPA에서 유리합니다.

단점

• 느린 초기 로드 시간: 초기 로딩 시 JavaScript 파일이 모두 다운로드되고 실행되어야 하기 때문에 초기 로딩 시간이 길어질 수 있습니다.
• SEO 문제: 초기 HTML은 빈 상태이므로, 검색 엔진이 페이지를 제대로 크롤링하지 못할 수 있습니다. 검색 엔진에 따라 JavaScript로 렌더링된 콘텐츠를 제대로 인식하지 못하는 경우도 있습니다.
• 초기 렌더링 속도: JavaScript가 로드되고 실행될 때까지 페이지가 표시되지 않거나 비어 있는 상태로 보일 수 있습니다.

---

정리

SSR (Server-Side Rendering)CSR (Client-Side Rendering)

초기 로드 시간	빠름	느림 (JavaScript 로드 필요)
SEO	유리	SEO에 불리 (JavaScript가 처리 필요)
서버 부하	서버 부하 증가	서버 부하 적음
동적 데이터 처리	불리	유리 (실시간 데이터, 상호작용 많은 페이지)
첫 화면 로딩	빠름 (즉시 보임)	지연 (JavaScript 실행 후 보임)

 

혼합된 접근법 (Hydration, ISR, SSG 등)

현대 웹 애플리케이션에서는 SSR과 CSR을 혼합한 접근 방식도 많이 사용됩니다. 예를 들어, Next.js 같은 프레임워크는 SSR과 CSR을 결합한 Hydration이나 Incremental Static Regeneration(ISR) 같은 방식을 제공하여 양쪽의 장점을 활용할 수 있습니다.