1. CSR(Client-Side Rendering)
클라이언트(브라우저)에서 JavaScript가 실행되어 화면을 렌더링한다.
서버는 기본 HTML과 JavaScript 파일을 전달하고, 브라우저에서 렌더링이 이루어진다.
예제 코드 - React
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<div>
<h1>Client-Side Rendering</h1>
{data ? <p>{data.title}</p> : <p>Loading...</p>}
</div>
);
}
export default App;특징
- 빠른 페이지 전환과 서버 부담이 적다는 점이 장점이다.
- JavaScript 파일이 다운로드 및 실행되어야 하기 때문에 초기 로딩이 느리다
- SEO(검색 엔진 최적화)를 적용하기 불리하다.
유리한 상황
- SPA (Single Page Application): 페이지 전환이 빈번하고 사용자와의 상호작용이 많은 경우
- 대시보드 애플리케이션: 데이터를 실시간으로 시각화하고 업데이트하는 경우
- 채팅 애플리케이션: 실시간 메시지 전송 및 반응이 필요한 경우
- 게임 웹 애플리케이션: 고도의 사용자 상호작용과 애니메이션이 많은 경우
2. SSR(Server-Side Rendering)
서버에서 HTML을 렌더링한 후 브라우저에 전달한다.
SEO가 필요하거나 초기 로딩 속도가 중요한 경우에 사용된다.
예제 코드 - Next.js
// pages/index.js
export async function getServerSideProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await res.json();
return {
props: { data },
};
}
export default function Home({ data }) {
return (
<div>
<h1>Server-Side Rendering</h1>
<p>{data.title}</p>
</div>
);
}특징
- 서버에서 완전한 HTML을 제공하기 때문에 초기 로딩이 빠르다
- SEO(검색 엔진 최적화)를 적용하기 유리하다.
- 서버 부담이 증가하고 설정이 복잡하다는 단점이 있다.
유리한 상황
- SEO가 중요한 웹사이트: 검색 엔진 최적화가 필요한 경우
- 전자상거래 사이트: 상품 재고, 가격, 사용자별 정보 등 실시간 데이터가 필요한 경우
- 뉴스 사이트: 최신 뉴스를 실시간으로 제공해야 하는 경우
- 사용자 맞춤형 콘텐츠: 로그인한 사용자에 따라 다른 데이터를 제공해야 할 때
3. SSG (Static Site Generation)
빌드 시점에 정적 HTML 파일을 생성하고, 요청 시 미리 생성된 파일을 제공한다.
예제 코드 - Next.js
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await res.json();
return {
props: { data },
};
}
export default function Home({ data }) {
return (
<div>
<h1>Static Site Generation</h1>
<p>{data.title}</p>
</div>
);
}
특징
- 정적 파일을 제공하기 때문에 초기 로딩이 매우 빠르다
- SEO(검색 엔진 최적화)를 적용하기 유리하다.
- 실시간 데이터를 조회하기에는 불리하다.
유리한 상황
- 블로그 및 기술 문서 사이트: 콘텐츠가 자주 변경되지 않고 고정된 경우
- 포트폴리오 사이트: 업데이트가 자주 필요하지 않은 정적 콘텐츠
- 마케팅 랜딩 페이지: 빠른 로딩 속도가 필요한 정적 페이지
- 문서 사이트: 기술 문서나 매뉴얼 페이지
4. ISR (Incremental Static Regeneration)
SSG와 SSR의 하이브리드 방식으로, 정적 페이지를 주기적으로 재생성한다.
예제 코드 - Next.js
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await res.json();
return {
props: { data },
revalidate: 10, // 10초마다 페이지 재생성
};
}
export default function Home({ data }) {
return (
<div>
<h1>Incremental Static Regeneration</h1>
<p>{data.title}</p>
</div>
);
}
특징
- 정적 파일을 제공하기 때문에 초기 로딩이 빠르다
- 일정 시간마다 정적 페이지를 갱신하는 동적 업데이트를 한다.
- Next.js와 같은 일부 프레임워크에서만 지원하므로 프레임워크의 제한이 있다.
유리한 상황
- 대규모 콘텐츠 사이트: 콘텐츠가 많고 일부 페이지만 자주 업데이트되는 경우
- 블로그 및 뉴스 사이트: 기존 글은 변경되지 않지만, 새 글이 주기적으로 추가되는 경우
- 전자상거래 사이트: 재고나 가격이 자주 바뀌지만, 모든 페이지를 매번 빌드하기 어려운 경우
