안녕하세요, 수염난아이티 입니다.
이번 페이지에서는 서버 사이드 랜더링(Server-Side Rendering)과 클라이언트 사이드 랜더링(Client-Side Rendering)에 대해서 알아보겠습니다.
목차
1. "서버 사이드 랜더링"이란?
서버 사이드 랜더링(Server-Side Rendering)은 웹페이지의 HTML을 서버에서 미리 랜더링하여 클라이언트(브라우저)에 전달하는 방식입니다.
2. "클라이언트 사이드 랜더링"이란?
클라이언트 사이드 랜더링(Client Side Rendering)은 웹페이지의 기본 HTML을 먼저 로드한 후, 브라우저에서 Javascript를 실행해 동적으로 콘텐츠를 랜더링 하는 방식입니다.
3. 서버 사이드 랜더링 특징
- 빠른 초기 로딩 : 완성된 HTML을 받아 바로 화면에 표시할 수 있음
- SEO 친화적 : 검색 엔진이 완전한 페이지를 쉽게 크롤링할 수 있음
- SEO : Search Engine Optimization 검색 엔진 최적화
- 서버 부담 증가 : 모든 요청에 대해 서버가 페이지를 랜더링 해야함
- 페이지 간 전환 속도 느림 : 새 페이지 로드 시마다 서버 요청이 필요함
4. 클라이언트 사이드 랜더링 특징
- 초기 로딩 속도 느림 : 브라우저가 Javascript를 실행해야 페이지가 보임
- 빠른 페이지 전환 : 한 번 로드된 데이터로 동적 UI 업데이트 가능
- SEO 불리 : 기본 HTML이 비어있어 검색 엔진 크롤링이 어려움 (하지만 Next.js 등의 기술로 보완 가능)
- 서버 부담 감소 : 대부분의 랜더링이 클라이언트에서 이루어짐
5. 서버 사이드 랜더링과 클라이언트 사이드 랜더링 비교
구분 | 서버 사이드 랜더링 SSR | 클라이언트 사이드 랜더링 CSR |
초기 로딩 속도 | 빠름 | 느림 |
페이지 이동 속도 | 느림 | 빠름 |
SEO | 유리함 | 불리함 |
보안성 | 높음 | 낮음 |
사용자 경험 | 낮음 | 높음 |
서버 부하 | 높음 | 낮음 |
개발 난이도 | 낮음 (일반적인 웹 개발) | 높음 (복잡한 SPA 구조) |
캐싱 | 불가능 | 가능 |
읽어주셔서 감사합니다.
'▶IT World◀ > IT Basic' 카테고리의 다른 글
CSP, MSP 란? (0) | 2025.03.13 |
---|---|
Java와 Javascript의 차이점 (1) | 2025.02.24 |
클론코딩(Clone coding)이란? (0) | 2025.02.19 |
BPM(Business Process Management)란? (0) | 2025.02.17 |
데이터웨어하우스, 데이이터마트, 데이터레이크란? (0) | 2025.02.14 |