Today I Learned
SSR, CSR 방식의 장단점과 특징
떼굴펜
2024. 9. 12. 16:03
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) 같은 방식을 제공하여 양쪽의 장점을 활용할 수 있습니다.