클라이언트 사이드 렌더링 (CSR)
프론트엔드 개발자에게 상대적으로 익숙한 방식은 클라이언트 사이드 렌더링(CSR)이다. CSR은 클라이언트(브라우저)가 웹 페이지를 요청할 때, 서버는 최소한의 HTML만 제공하고 이후 자바스크립트가 실행하면서 페이지를 렌더링하는 방식이다.
예를 들어 리액트, 뷰, 앵귤러와 같은 프론트엔드 라이브러리나 프레임워크들은 CSR을 기본적으로 사용한다. 리액트 프로젝트를 생성하면 index.html파일은 거의 비어 있고, index.js에서 자바스크립트가 동적으로 컨텐츠를 삽입하며 화면을 구성하게 된다.
<!-- index.html -->
<body>
<div id="root"></div> <!-- React가 이곳에 렌더링 -->
</body>
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
즉, 초기에는 화면에 보이는 것이 없지만, 브라우저가 자바스크립트를 실행하면서 화면이 렌더링된다.
CSR의 특징
✅ 빠른 상호작용
- 한번 렌더링된 후에는 서버와 추가적인 HTML 요청 없이, 클라이언트에서 빠르게 화면을 변경할 수 있다.
✅ 서버 부하 감소
- 서버에서 매번 HTML을 생성해 주는 것이 아니라, 최소한의 HTML만 제공하면 된다.
❌ 초기 로딩 지연
- 페이지 진입 시 데이터를 가져와 렌더링해야 하므로, 초기 로딩이 느릴 수 있다.
❌ SEO(검색 엔진 최적화)에 불리
- 초기 HTML이 비어 있기 때문에 검색 엔진이 페이지 내용을 제대로 수집하지 못할 수 있다.
서버 사이드 렌더링 (SSR)
서버 사이드 렌더링(SSR)은 클라이언트가 요청을 보낼 때, 서버에서 HTML을 완전히 만들어서 응답하는 방식이다. 즉, 클라이언트가 따로 자바스크립트를 화면에 구성할 필요 없이 서버에서 렌더링한 HTML을 그대로 받아와서 즉시 화면에 표시할 수 있다.
SSR 예제
일반적으로 Next.js와 같은 프레임워크에서 SSR을 지원하며, 서버에서 HTML을 생성하는 방식은 아래와 같다.
// pages/index.js (Next.js)
export async function getServerSideProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return { props: { data } };
}
export default function Home({ data }) {
return (
<div>
<h1>{data.title}</h1>
<p>{data.description}</p>
</div>
);
}
위 코드는 사용자가 페이지를 요청할 때 서버에서 데이터를 가져오고, 미리 HTML을 생성하여 클라이언트에 전달하는 방식이다.
SSR의 특징
✅ 초기 로딩 속도가 빠름
- 서버에서 완성된 HTML을 보내주기 때문에 클라이언트가 별도로 화면을 렌더링할 필요가 없다.
✅ SEO에 유리
- 검색 엔진이 HTML을 제대로 읽을 수 있어 SEO 최적화에 도움이 된다.
❌ 서버 부하 증가
- 모든 요청마다 HTML을 생성해야 하므로, 서버의 부담이 커질 수 있다.
❌ 클라이언트에서 추가 상호작용이 필요할 경우 복잡해짐
- 페이지가 동적으로 변해야 하는 경우 CSR보다 구현이 어렵다.
정적 사이트 생성 (SSG)
정적 사이트 생성(SSG)은 빌드 시점에 미리 HTML을 새성하여 저장해 두는 방식이다. 즉, SSR처럼 매 요청마다 서버에서 HTML을 생성하는 것이 아니라, 페이지를 미리 만들어 두고 클라이언트에게 제공하는 방식이다.
SSG 예제
Next.js에서는 getStaticProps를 사용해 미리 HTML을 생성할 수 있다.
// pages/index.js (Next.js)
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return { props: { data } };
}
export default function Home({ data }) {
return (
<div>
<h1>{data.title}</h1>
<p>{data.description}</p>
</div>
);
}
이 방식은 빌드 시 HTML을 생성하기 떄문에, 요청이 들어와도 서버에서 추가적인 작업 없이 즉시 페이지를 제공할 수 있다.
SSG의 특징
✅ 초기 로딩 속도가 빠름
- 정적 HTML을 제공하므로 즉시 로딩된다.
✅ 서버 부하가 없음
- 서버에서 HTML을 생성하는 작업이 없으므로 부하가 거의 없다.
✅ SEO에 유리
- SSR처럼 미리 HTML이 제공되기 때문에 검색 엔진 최적화가 가능하다.
❌ 동적인 데이터 반영 어려움
- 미리 생성된 HTML이므로, 실시간 데이터를 반영하려면 별도의 API 요청이 필요하다.
SPA와 CSR의 연관 관계
SPA (싱글 페이지 애플리케이션)
- 하나의 HTML 페이지에서 모든 화면을 관리하는 웹 애플리케이션 구조
- 페이지 이동 없이 클라이언트에서 동적으로 화면을 변경
CSR (클라이언트 사이드 렌더링)
- SPA에서 사용되는 대표적인 렌더링 방식
- 서버에서 HTML을 받는 것이 아니라, 클라이언트에서 동적으로 렌더링
👉 즉, SPA는 CSR을 사용해서 구현할 수 있는 애플리케이션 패턴이다. 하지만 Next.js같은 프레임워크를 사용하면 SPA에서도 SSR이나 SSG를 적용할 수 있다.
SSR, CSR, SSG 비교 정리
| 렌더링 방식 | 초기 로딩 속도 | SEO 최적화 | 서버 부하 | 동적 데이터 |
| CSR | 느림 | 불리 | 낮음 | 매우 유리 |
| SSR | 빠름 | 유리 | 높음 | 유리 |
| SSG | 매우 빠름 | 유리 | 없음 | 어려움 |
결국, 각 렌더링 방식은 상황에 따라 적절하게 선택해야 한다.
빠른 사용자 인터랙션이 필요하다면 CSR
SEO 최적화가 중요하다면 SSR
최대 성능과 빠른 로딩이 필요하다면 SSG
모던 웹 개발에서는 CSR, SSR, SSG를 혼합하여 사용하는 것이 일반적이다. 예를 들어 Next.js에서는 CSR, SSR, SSG를 모두 지원하며, 각 페이지마다 적절한 렌더링 방식을 선택할 수 있도록 한다. 따라서 단순하게 하나의 방법만을 추구하는 것보다, 프로젝트의 특성에 맞는 렌더링 방식을 선택하는 것이 중요하다.
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트의 실행 컨텍스트(Execution Context) 완벽 정리 (ft. 스코프, TDZ, 호이스팅) (1) | 2025.03.17 |
|---|---|
| [JavaScript] 자바스크립트의 얕은 복사(shallow copy)와 깊은 복사(deep copy) (1) | 2025.03.05 |
| [JavaScript] 자바스크립트의 데이터 타입 (1) | 2025.03.03 |
| [JavaScript] 자바스크립트의 동기, 비동기 프로그래밍의 개념 (2) | 2025.02.24 |
| [JavaScript] 객체 내부에서의 getter, setter (0) | 2024.08.19 |
