[2025. 03. 11 화요일]
next.js를 배우면서 렌더링에 대해서만 한참을 배우고 구분했다.
SSR, CSR, SSG, ISR은 웹페이자 렌더링(HTML이 생성)되는 시점과 방식에 따라 구분된다.
뭐가 이렇게 많죠..?
SSR : Server-Side Rendering
- 클라이언트가 요청할 때마다 서버에서 데이터를 가져와 페이지의 HTML을 생성하여 응답하는 방식이다.
- 최신 데이터가 항상 보장되나, 매 요청마다 서버에서 데이터를 가져오기 때문에 서버부담이 크다.
- 검색 엔진이 완성된 HTML을 받아들이므로, 콘텐츠가 자주 변하는 SEO를 기대할 수 있다.
언제 사용하면 좋을까?
-
사용자 요청시 마다 최신 데이터를 렌더링하기 때문에 실시간 정보를 제공할 때 유리하다.
- 은행이나 금융 서비스의 대시보드처럼 로그인한 사용자에게 개인화된 정보를 제공해야할때.
- 뉴스처럼 매번 최신 기사를 보여줘야하는 사이트, 날씨 정보 등
예시 코드
export default async function SSRPage() {
const res = await fetch('https://api.example.com/data', {
cache: 'no-store',
});
const data = await res.json();
return <div>{data.message}</div>
}CSR : Client-Side Rendering)
- 페이지의 정적인 부분만 서버에서 HTML로 내보내고, 데이터는 브라우저에서 JS가 실행되면서 동적으로 페이지를 렌더링한다.
- 초기 HTML파일 크기가 작아서 초기 로디잉 빠르며, 이후 필요한 데이터만 가져오므로 효율적이다.
- 사용자와의 상호작용이 많은 애플리케이션에서 사용된다.
- SEO최적화는 부족.
언제 사용하면 좋을까?
- 사용자와의 상호작용이 많은 애플리케이션
- 데이터카 클라이언트에서 API호출로 가져오는 경우
- SEO가 크게 중요하지 않은 내부 애플리케이션, 관리자 도구
- SPA처럼 페이지 이동없이 동적으로 콘텐츠를 변경하는 웹앱.
예시 코드
'use client';
import { useEffect, useState } from 'react';
export default function CSRPage() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
setData(data);
}
fetchData();
}, []);
return <div>{data ? data.message : 'Loading...'}</div>;
}
SSG : Static Site Generation
쓱
- 빌드시점에 미리 HTML파일을 생성하여 정적 파일로 배포하는 방식이다.
- 빠른 로딩 속도와 높은 성능이 중요한 정적웹사이트에서 사용.
- 단 콘텐츠 변경 빈도가 낮아야 한다.
- SEO 효과가 좋다.
언제 사용하면 좋을까?
- 개인 블로그나 포트폴리오, 회사 소개 페이지 처럼 변경이 잦지 않은 사이트.
- React나 Next.js 등의 공식문서 처럼 정적인 문서 페이지.
예시 코드
export default async function Page() {
const res = await fetch('https://api.example.com/data', {
cache: 'force-cache'
});
const data = await res.json();
return <div>{data.message}</div>;
}
ISR : Incremental Static REgeneration(증분 정적 재생성)
- SSG의 장점을 유지하면서, 일정 주기마다 또는 특정 조거에 따라 페이지를 재생성 하여 최신 콘텐츠를 반영하는 방식
- SSG와 SSR의 중간 상태.
언제 사용하면 좋을까?
- 상품 상세 페이지 : 대부분 정적 페이지로 제공되지만, 가격이나 재고정보등은 주기적으로 업데이트되어야 할 때
- 특정 시점에 정보를 갱신해야하는 사이트 (주간랭킹, 일간랭킹 등)
예시 코드
const ONE_MINUTE_SECONDS = 60;
export default async function Page() {
const res = await fetch('https://api.example.com/data', {
next: {
revalidate: ONE_MINUTE_SECONDS,
}
});
const data = await res.json();
return <div>{data.message}</div>;
}
정리
- 각 렌던링 방식은 프로젝트의 요구사항과 데이터 업데이트 빈도, SEO 필요성 등에 따라 선택하면 될것 같다.
| 렌더링 방식 | 데이터 최신성 | 성능 | 추천 사용 사례 | SEO 필요성 |
|---|---|---|---|---|
| SSR | 높음 | 중간 | 자주 바뀌는 실시간 데이터 | SEO 유리 |
| CSR | 중간 | 높음 | 사용자 상호작용이 많은 앱 | x |
| SSG | 낮음 | 매우 높음 | 거의 바뀌지 않는 마케팅 페이지 | SEO 유리 |
| ISR | 중간 | 높음 | 블로그나 뉴스 사이트 |
one setp