CSR
CSR은 웹 페이지의 렌더링을 클라이언트, 즉 사용자의 브라우저에서 수행하는 방식입니다. 서버는 최소한의 HTML과 필요한 JavaScript 파일을 전송하고, 브라우저는 이 JavaScript를 실행하여 동적으로 페이지를 구성합니다.
- 사용자가 웹 페이지를 요청하면, 서버는 기본적인 HTML과 JavaScript 파일을 클라이언트에 전송합니다.
- 브라우저는 수신한 JavaScript를 실행하여 필요한 데이터를 서버의 API로부터 가져옵니다.
- 가져온 데이터를 사용하여 브라우저에서 동적으로 HTML을 생성하고 화면에 표시합니다.
장점
- 부드러운 사용자 경험: 페이지 전환 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하므로, 애플리케이션이 더 빠르고 부드럽게 동작합니다.
- 서버 부하 감소: 클라이언트에서 대부분의 렌더링 작업을 처리하므로 서버의 부담이 줄어듭니다.
단점
- 초기 로딩 시간 지연: 초기 로딩 시 필요한 모든 JavaScript 파일을 다운로드하고 실행해야 하므로 첫 화면 표시까지 시간이 더 걸릴 수 있습니다.
- SEO 한계: 검색 엔진 크롤러가 JavaScript를 완전히 처리하지 못하는 경우, 페이지의 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.
SSR
SSR은 서버에서 완전한 HTML 페이지를 렌더링하여 클라이언트에 전송하는 방식입니다. 브라우저는 수신한 HTML을 바로 표시하며, 필요한 경우 추가적인 JavaScript를 로드하여 상호작용을 활성화합니다.
- 사용자가 웹 페이지를 요청하면, 서버는 해당 요청에 맞는 완전한 HTML 페이지를 생성합니다.
- 생성된 HTML 페이지가 클라이언트에 전송되고, 브라우저는 이를 즉시 렌더링하여 사용자에게 표시합니다.
- 추가적인 상호작용이 필요한 경우, 브라우저는 관련 JavaScript 파일을 다운로드하여 실행합니다.
장점
- 빠른 초기 로딩: 서버에서 미리 렌더링된 HTML을 전송하므로 첫 화면이 빠르게 표시됩니다.
- SEO 친화적: 검색 엔진이 완전한 HTML 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있어 검색 엔진 최적화에 유리합니다.
단점
- 서버 부하 증가: 모든 요청에 대해 서버가 페이지를 렌더링해야 하므로 서버 자원 소모가 증가할 수 있습니다.
- 복잡한 개발 환경: 서버와 클라이언트 간의 상태 관리와 데이터 동기화가 복잡해질 수 있습니다.
| 특성 | CSR (클라이언트 사이드 렌더링 | SSR (서버 사이드 렌더링) |
| 렌더링 위치 | 클라이언트(브라우저) | 서버 |
| 초기 로딩 속도 | 느림 (초기 로딩 시 Javascript를 모두 다운받으므로 느림 - 이를 해결하기 위해 Code Splitting이라는 기술을 사용) | 보통 (한 페이지를 완전히 그리고 받아서 보여주므로 Javascript를 모두 다운받는 CSR보단 빠르지만 많이 빠르지는 않음) |
| 페이지 전환 속도 | 빠름 (이미 초기 로딩 때 Javascript를 모두 다운받았기에 필요한 부분만 추가적으로 받으면 되서 빠름) | 보통 (새로운 페이지 요청 시 전체 페이지를 새로 그려서 다운받아야하므로 CSR보다 느림) |
| SEO 최적화 | 나쁨 (HTML을 받을때 빈 HTML을 받아서 Javascript로 그리는 형식이기 때문에 Javascript 실행해서 크롤링하는 방식이 오래 걸리기도 하고 렌더링전에 수집해버리면 페이지를 빈 페이지로 인식하기도 하기에 어렵다, 동적 렌더링이라는 방식이 있기는 한데 권장하지는 않는다) | 좋음 (이미 서버에서 페이지를 다 그려서 보내주기 때문에 크롤러는 그걸 읽기만 하면 된다. 그래서 SEO가 쉽다) |
| 서버 부하 | 낮음 (렌더링을 클라이언트에서 전부 처리하기 때문에 서버가 할 일은 HTML, Javascript와 같은 파일들을 보내주는 일밖에 없다) | 보통 (렌더링을 서버에서 해줘야 하므로 CSR보다 부하가 더 많이 걸린다) |
그럼 뭘 써야 할까?
| 상황 | CSR | SSR |
| SEO가 중요한 경우 (브라우저가 상품일 경우) | X (해당 경우는 SEO가 중요하다 볼수 있기에 권장하지 않는다) | O |
| 정적 콘텐츠 위주일 경우 | X (어처피 정적 사이트 만들어놓고 계속 가져다 쓸수 있으니까 굳이?) | △ (SSR로 해도 되기는 하는데 SSG로 하는게 낫다 - SSG는 다음 글에서 다룰 예정이다) |
| SEO가 안 중요한 경우 (ex: 백오피스 툴) | O (SEO 필요 없으면 CSR이 더 낫다) | X |
| 데이터가 자주 갱신되는 경우 | O | △ (서버에서 데이터까지 가져와서 렌더링해봤자 데이터가 바로 갱신되니 그렇게까지 큰 의미는 없을수도 있다) |
| 사용 예시 | 대시보드, 백오피스 툴 등등 | 블로그, 마케팅 페이지 등등 |
근데 요즘에는 CSR로 시작한 react나 vue같은 프레임워크(라이브러리)에서 SSR지원을 추가하는 것들을 보면 SSR에서 CSR로 갔다가 다시 CSR에서 다시 SSR로 돌아가고 있는것 같다.
'Dev > Web' 카테고리의 다른 글
| [Javascript] 반복문-3탄 (map, forEach, reduce) (0) | 2023.12.14 |
|---|---|
| [Javascript] 반복문-2탄 (For..of, while, do while) (0) | 2023.11.09 |
| [Javascript] 반복문-1탄 (For, For..in) (0) | 2023.11.09 |