렌더링 방식 CSR, SSR
# 렌더링 방식
: 서버와 클라이언트에서 HTML을 어떻게 제공할지 결정하는 방식
** 어디에서 실행되느냐(클라이언트 vs 서버)
** 어떤 기술이 이를 처리하느냐
로 방식을 구분한다.
# 클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)
[ 개념 ]
: 초기 요청 시 서버에서 HTML의 기본 틀만 전달하고, JavaScript가 실행되면서 브라우저가 데이터를 가져와서 페이지를 렌더링함.
즉, 화면을 구성하는 주요 작업인 HTML 페이지 생성이 브라우저에서 (클라이언트)에서 실행됨.
[ 특징 ]
- 서버는 HTML 생성을 담당하지 않고, 단순히 API 요청에 대한 데이터만 반환하면 된다.
- React, Angular, Vue.js 같은 SPA(Single Page Application) 프레임워크는 CSR을 주로 사용한다.
[ 동작 방식 ]
1. 사용자가 웹사이트에 접속하면, 서버에서 기본 (빈) HTML 파일과 자바스크립트 번들을 브라우저로 전송
2. 브라우저가 자바스크립트 파일을 다운로드하고 실행함
3. JS가 API 요청을 보내서 데이터를 가져오고, 이를 활용해 페이지를 동적으로 구성함.
4. 이후 사용자와의 상호작용을 처리
[ 장점 ]
✅ 서버 부하 감소 → 서버가 HTML을 렌더링하지 않아도 되므로 서버의 부담이 줄어듦.
✅ 빠른 페이지 이동 → 처음 로딩이 느릴 수 있지만, 이후 페이지 전환 속도는 빠름 (SPA 구조에서 유리).
✅ 더 나은 사용자 경험 → 부드러운 화면 전환과 인터랙티브한 UI 구현 가능.
[ 단점 ]
❌ 초기 로딩 속도 느림 → JS를 다운로드하고 실행하기 전까지는 화면이 비어 있음.
❌ SEO (검색 엔진 최적화) 불리함 → 초기 HTML이 비어 있기 때문에 크롤러가 내용을 제대로 인식하지 못할 수 있음.
❌ JS 비활성화 환경에서는 동작하지 않음.
# 서버 사이드 렌더링(SSR, Server-Side Rendering)
[ 개념 ]
: 서버에서 HTML을 완전히 구성한 후 클라이언트에게 전달하는 방식
즉, 화면을 구성하는 주요 작업이 서버에서 실행됨
[ 특징 ]
- 서버에서 HTML을 생성(이미 만들어진 DOM)하여 클라이언트(브라우저)로 전달하고 브라우저는 받은 HTML을 그대로 렌더링한다.
- React에서는 SSR을 구현하기 위해 Next.js와 같은 프레임워크를 사용한다.
[ 동작 방식 ]
1. 서버가 요청을 받으면, HTML 콘텐츠를 동적으로 생성하여 완전한 HTML 파일을 브라우저로 전달
2. 브라우저는 서버에서 받은 HTML을 즉시 렌더링
3. 이후 자바스크립트를 실행하여 클라이언트 측의 동적 기능을 활성화
[ 장점 ]
✅ SEO 최적화 → 서버에서 HTML이 완성된 상태로 제공되므로 검색 엔진이 내용을 쉽게 크롤링할 수 있음.
✅ 빠른 첫 화면 로딩 → 초기 렌더링이 서버에서 이루어지므로 사용자가 빠르게 페이지를 볼 수 있음.
✅ JS 비활성화 환경에서도 기본적인 콘텐츠를 확인 가능.
[ 단점 ]
모든 요청마다 새로고침되어 서버에서 HTML을 다시 생성해야한다.
→ ❌ 서버 부하 증가 : 트래픽이 많을 경우 서버 부담이 커지고 클라이언트에서 인터랙션이 느려진다.
→ ❌ 느린 페이지 이동 : 매 랜더링마다 서버를 거쳐 페이지 전환 속도가 느리다.
❌ 개발 복잡성 증가 → CSR보다 구현이 복잡하고, 서버와 클라이언트의 코드가 모두 필요함.
# CSR vs SSR 비교
| 비교 항목 | CSR (Client-Side Rendering) | SSR (Server-Side Rendering) |
| 렌더링 위치 | 클라이언트(브라우저)에서 렌더링 | 서버에서 HTML을 렌더링 후 전송 |
| 첫 화면 속도 | 느림 (JS 실행 후 렌더링됨) | 빠름 (완전한 HTML 전달됨) |
| SEO 최적화 | 어려움 (초기 HTML이 빈 상태) | 유리함 (완전한 HTML 제공) |
| 서버 부하 | 낮음 (클라이언트에서 렌더링) | 높음 (요청마다 HTML 생성) |
| 페이지 전환 속도 | 빠름 (SPA의 장점) | 느림 (새 페이지마다 서버 요청) |
| 개발 복잡도 | 상대적으로 단순 | 비교적 복잡 (서버와 클라이언트 코드 필요) |
# 정적 사이트 생성, SSG (Static Site Generation)
: 빌드 타임에 HTML을 미리 생성해 두고, 클라이언트는 이를 그대로 받아오는 방식
[ 특징 ]
매우 빠름, 서버 부하 거의 없음, 변경이 필요한 경우 재배포 필요
# 점진적 정적 생성, ISR (Incremental Static Regeneration)
: SSG의 단점을 보완한 방식으로, 일부 페이지만 동적으로 다시 생성하는 방법
[ 특징 ]
빌드 이후에도 특정 페이지를 새롭게 갱신 가능
# 하이브리드(Static Generation + SSR or CSR)
: 정적 페이지 생성(Static Generation)과 동적 렌더링을 혼합하여 처리
- 중요한 콘텐츠는 정적 생성, 나머지는 클라이언트에서 처리하여 성능과 동적 기능의 균형을 맞춘다.
- 예시 ) Next.js: 일부 페이지는 정적으로 생성하고, 일부는 동적으로 SSR로 처리