![[기술 정리] SSR과 CSR](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-11-23T12%3A59%3A51.652Z-6445f198-a51e-49bb-8776-f90a51dbf15f&w=3840&q=75)
1. SSR (Server-Side Rendering)
웹 페이지의 HTML을 서버에서 미리 렌더링하여 클라이언트에 전달하는 방식
정의
SSR은 서버에서 HTML 페이지를 완성하여 클라이언트에 전달하는 방식이다. 클라이언트는 서버로부터 완성된 HTML을 받아 화면에 즉시 표시한다.
장점
- SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리: 페이지가 서버에서 완성된 상태로 전달되므로 검색 엔진이 페이지 내용을 쉽게 인식할 수 있다.
- 빠른 초기 렌더링: 서버가 HTML을 렌더링해 전달하므로 초기 로딩 속도가 빠르다.
- 저사양 기기에서 효율적: 클라이언트 측의 처리 부담이 적다.
단점
- 서버 부하 증가: 모든 요청마다 서버에서 페이지를 렌더링하기 때문에 서버 자원을 많이 소모한다.
- 상호작용 지연: HTML은 빠르게 전달되지만, 클라이언트 측에서 JavaScript가 로드되고 이벤트가 활성화되는 데 시간이 걸릴 수 있다.
- 복잡한 상태 관리: SSR과 클라이언트 측 상호작용을 함께 구현해야 하므로, 애플리케이션 상태 관리가 복잡해질 수 있다.
2. CSR (Client-Side Rendering)
브라우저에서 JavaScript를 사용해 페이지 전체를 렌더링하고 동적으로 업데이트하는 방식
정의
CSR은 클라이언트에서 JavaScript로 HTML을 렌더링하는 방식으로, SPA(Single Page Application)의 핵심 기술이다. 서버는 기본적인 HTML과 JavaScript 파일만 전달하고, 클라이언트는 페이지 로드 후 필요한 데이터를 서버에 요청해 화면을 완성한다.
장점
- 상호작용이 빠름: 페이지 내에서의 탐색이나 상호작용이 서버와의 통신 없이 클라이언트에서 즉시 이루어진다.
- 서버 부담 감소: 서버는 초기 HTML과 JavaScript만 제공하고 이후 렌더링 작업은 클라이언트에서 수행하므로 서버 부담이 적다.
- 동적인 페이지 처리에 유리: 실시간 데이터 업데이트나 사용자 상호작용이 많은 애플리케이션에 적합하다.
단점
- SEO에 불리: 초기 HTML에는 콘텐츠가 없고, JavaScript가 실행된 이후에 콘텐츠가 렌더링되므로, 검색 엔진이 콘텐츠를 인식하기 어렵다.
- 초기 로딩 지연: JavaScript 파일 로드 후 페이지를 렌더링하기 때문에 초기 로딩 시간이 길다.
- 기기 성능에 의존: 클라이언트에서 렌더링을 처리하므로, 저사양 기기에서는 성능이 저하될 수 있다.
3. SSR과 CSR의 차이점
항목 | SSR | CSR |
렌더링 위치 | 서버 | 클라이언트 |
SEO | 유리 | 불리 |
초기 로딩 속도 | 빠름 | 느림 |
상호작용 속도 | 초기 지연 후 다소 느림 | 빠름 |
서버 부하 | 높음 | 낮음 |
복잡성 | 상태 관리 복잡 | 상대적으로 간단 |
Share article