[CS] 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 차이는 웹 애플리케이션의 HTML 콘텐츠를 생성하고 브라우저에 전달하는 방식에 따라 나뉜다.

각 방식은 데이터 처리 위치와 사용자 경험 측면에서 차이를 가지는데, 오늘은 이 두 방식에 대해 알아보도록 하자.

 

1. 서버 사이드 렌더링 (SSR)

서버 사이드 렌더링은 서버에서 완전한 HTML을 생성하여 클라이언트에 전달하는 방식으로, 브라우저가 이를 즉시 렌더링한다.

이로 인해 첫 화면 로딩 속도가 빠른 것이 특징이다.

 

1-1. SSR 의 작동 방식

1) 서버에서 HTML을 생성하고 해당 파일을 브라우저에 전달한다.

2) 사용자가 페이지를 요청하면 서버가 요청을 처리하고, DB에서 필요한 데이터를 가져와 HTML을 생성한 후 브라우저에 반환한다.

 

단계별로 자세히 설명하자면 아래와 같다.

 

1) 사용자가 브라우저에서 URL에 접속

2) 서버가 DB에서 데이터 조회

3) 조회된 데이터를 기반으로 HTML 생성

4) 완성된 HTML을 브라우저에 전달

5) 브라우저는 해당 HTML을 그대로 렌더링

 

1-2. SSR 의 장점

1) 초기 로딩 속도가 빠르다.

2) 검색 엔진 크롤러가 완전한 HTML을 가져가므로, 검색 엔진 최적화(SEO)에 유리하다.

3) JS가 비활성화된 환경에서도 정상적으로 동작한다. 

 

1-3. SSR 의 단점

1) 모든 요청마다 HTML을  생성해야 하므로 서버 리소스 소모가 크다. 즉, 서버에 부하가 갈 수 있다.

2) 사용자와 상호작용이 많은 애플리케이션에는 적합하지 않을 수 있다.

 

1-4. 사용 예시

1) 검색 엔진 최적화(SEO)가 중요한 뉴스 사이트나 블로그

2) 초기 컨텐츠 로딩 속도가 중요한 페이지

3) JS를 사용할 수 없는 환경에서도 동작해야 하는 애플리케이션

---

 

2. 클라이언트 사이드 렌더링 (CSR)

클라이언트 사이드 렌더링은 브라우저가 렌더링을 담당하는 방식으로, 서버에서 전달받은 데이터를 브라우저가 처리해 화면을 구성한다.

SSR 처럼 바로 렌더링 가능한 HTML을 받는 것이 아닌, 브라우저가 HTML 파싱과 JS실행을 통해 화면을 생성하기 때문에 초기 로딩 속도가 느릴 수 있다는 것이 특징이다.

 

2-1. CSR 의 작동 방식

1) 서버에서 최소한의 HTML과 JS 파일 전달

2) 브라우저가 JS 실행해 API 요청을 보내고, 데이터를 받아서 DOM 구성

 

단계별로 자세히 설명하자면 아래와 같다.

 

1) 사용자가 브라우저에서 URL에 접속

2) 서버가 기본 HTML과 JS 파일 반환

3) 브라우저가 JS 실행하여 API로 데이터 요청

4) 서버가 JSON 형태로 데이터 반환

5) JS가 받은 데이터를 기반으로 동적 DOM을 생성하여 페이지 렌더링

 

2-2. CSR 의 장점

1) 서버가 HTML을 생성하지 않고 반환하므로 서버 부하가 감소할 수 있다.

2) SPA(Single Page Application)에서 UX가 향상될 수 있다.

> SPA는 웹 애플리케이션의 형태 중 하나로, 페이지를 처음 로드한 후에는 새로운 페이지 요청 없이 애플리케이션이 동작하는 것을 말한다. 

3) 클라이언트에서 JS를 통해 페이지 업데이트가 가능하다.

 

2-3. CSR의 단점

1) 브라우저가 HTML 뿐만 아니라 JS와 데이터 모두 로드한 후 처리되기 때문에 초기 로딩 속도가 느리다.

2) 검색 엔진 크롤러가 JS를 실행하지 못 하면 콘텐츠를 인식하지 못 하므로 검색 엔진 최적화(SEO)가 어렵다.

3) JS가 비활성화된 환경에서는 동작하지 않는다.

 

2-4. 사용 예시

1) 대화형 웹 애플리케이션

2) SPA를 기반으로 동적 데이터 처리 및 UI 갱신이 많은 프로젝트

3) 네트워크 요청이 많은 실시간 데이터 애플리케이션

---

3. 비교

 

특징	SSR	CSR
렌더링 위치	서버	클라이언트 브라우저
초기 로딩 속도	빠름	느림
서버 부하	높음	낮음
SEO	유리	불리 (추가 설정 필요)
사용자 경험	새로고침 필요 (전통적 방식)	부드러운 인터페이스 제공 (SPA에 적합)

---

 

4. 정리

SSR과 CSR 중 어떤 방식을 택할 지는 프로젝트의 요구사항에 따라 달라질 수 있기 때문에 적절한 렌더링 방식을 사용해야 한다.

SSR은 초기 페이지 로딩 속도가 중요한 프로젝트에 유리하며, CSR은 UX와 실시간 데이터 처리가 중요한 프로젝트에 유리하다.

내가 하고 있는 프로젝트의 성격을 파악하여 유리한 방식을 택하는 게 중요하다!