CSR (Client Side Rendering)
React에서 주로 사용하는 방법으로, 클라이언트에서 렌더링하는 방식이다.
컴포넌트가 마운트된 이후에 데이터 패칭을 진행하며, SPA(Single Page Application)에서 자주 사용된다.
장점
- 한 번 로딩한 이후에는 새로고침 없이 페이지 전환이 가능
- 서버 부담이 적음
- 실시간 데이터 업데이트가 가능
단점
- 초기 로딩 시간이 길어질 수 있음 (JS 실행 후 UI가 그려지므로).
- 클라이언트에서 컨트롤하므로 SEO 최적화가 어려움.
- 보안상 클라이언트에서 데이터를 관리해야 하는 경우, 민감한 정보가 노출될 위험이 있음.
FCP(First Contentful Paint)란 사용자가 페이지에서 처음으로 콘텐츠를 볼 수 있는 시점을 의미함.
SSR (Server Side Rendering)
요청이 들어올 때마다 서버에서 사전 렌더링을 진행하는 방식이다.
데이터 패칭도 서버에서 이루어지므로, 페이지가 진입 직후 완성된 HTML을 제공할 수 있다.
장점
- 초기 UI를 빠르게 표시 가능 (빈 화면이 보이지 않음)
- SEO 최적화가 가능 (검색엔진이 완성된 HTML을 크롤링할 수 있음)
- 실시간 데이터가 필요한 페이지(예: 뉴스, 소셜 피드)에서 유용
단점
- 서버 부하 증가 (매 요청마다 서버가 HTML을 생성해야 함).
- 따라서 사용자가 기하급수적으로 늘어날 경우 서버가 터질 수 있음.
- 데이터 요청 시간이 길어지면 페이지 로딩 속도가 느려질 수 있음.
- CDN 캐싱을 활용하기 어렵다.
SSG (Static Site Generation)
빌드 타임에 미리 페이지를 생성하는 방식이다.
변화가 거의 없는 정적인 페이지(회사 소개, 블로그 글 등)에 적합하다.
장점
- 요청 시점이 아니라 빌드 시점에 렌더링되므로, 매우 빠른 속도로 응답 가능
- SEO에 최적화됨
- 서버 부하가 없음 (CDN 캐싱 가능)
단점
- 빌드 이후의 데이터를 즉각 반영하기 어려움
- 페이지가 많아질 경우 빌드 시간이 증가
✅ fallback을 이용한 SSG + SSR 조합 (Page Router 기준)
fallback: false: 미리 생성된 페이지 외에는 모두 404 반환fallback: "blocking": 미리 생성되지 않은 페이지는 SSR로 동작fallback: true: SSR로 작동할 페이지의 경우, 빈 HTML만 먼저 보여주고 데이터를 불러온 후 렌더링 (로딩 UI 가능)
ISR (Incremental Static Regeneration)
증분 정적 생성 방식으로, SSG의 한계를 보완하여 설정된 주기마다 페이지를 업데이트하는 방식이다.
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 60 * 60, // 1시간마다 새로운 데이터 반영: 1초 단위
};
}장점
- 모든 페이지를 다시 빌드하지 않고도 최신 데이터를 반영 가능
- 정적 페이지의 성능을 유지하면서도 실시간 데이터를 부분적으로 적용할 수 있음
단점
- 업데이트 주기(
revalidate시간)가 지나야 새로운 데이터가 반영됨
On-Demand-ISR
요청을 받을 때마다 페이지를 다시 생성하는 ISR로, SSR처럼 항상 최신 데이터를 제공하면서도, 정적 사이트의 장점을 유지할 수 있다.
NEXT.js로 구현된 많은 웹사이트에서 활발하게 이용되는 강력한 기능이다.
import { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse,
) {
try {
await res.revalidate('/');
return res.json({ revalidate: true });
} catch (err) {
res.status(500).send('Revalidation Failed');
console.error(err);
}
}위처럼 revalidate api를 만든 후 localhost:3000/api/revalidate에서 요청하면 페이지의 리렌더링이 일어난다.
장점
- 사용자의 행동(수정, 삭제 등)에 따라 최신 데이터를 반영 가능
- 필요한 경우에만 갱신하여 서버 리소스를 효율적으로 사용
단점
- 자동 업데이트가 되지 않음 (API 트리거 필요)
- SSR처럼 "항상 최신 데이터"를 보장하지는 않음.
api/revalidate가 외부에서 무분별하게 호출될 경우 보안 문제, 서버 부하 발생 가능
결론
CSR 인터랙션이 많고, 실시간 데이터 필요 (예: 대시보드)
SSR 페이지마다 데이터가 다르고, 최신성이 중요 (예: 뉴스)
SSG 정적인 콘텐츠가 많은 페이지 (예: 회사 소개)
ISR 주기적인 데이터 변경이 필요한 경우 (예: 베스트셀러 목록)
On-Demand ISR 데이터 변경 후 업데이트가 즉시 필요한 경우 (예: 상품 정보 수정, 블로그 글 수정 반영)
자료 출처: 한 입 크기로 잘라먹는 Next.js(v15)
