React, Vue

Next.js 렌더링 ✅ CSR, SSR, SSG, ISR 차이와 선택

jonbeo 2025. 11. 16. 09:46
반응형

 

 

React로 만든 SPA(Single Page Application)는 기본적으로 클라이언트 렌더링(CSR) 방식입니다.
하지만 이 방식은 SEO, 초기 로딩 속도에서 한계가 있었죠.
Next.js는 이런 단점을 보완하기 위해 다양한 렌더링 옵션을 제공합니다 👇

💻 1. CSR (Client-Side Rendering)

📌 렌더링 위치 → 브라우저(클라이언트)
📌 예시 → 순수 React 앱 (create-react-app)

 
function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/data").then(res => res.json()).then(setData);
  }, []);
  return <div>{data ? data.title : "Loading..."}</div>;
}

 

✅ 장점

  • 빠른 상호작용
  • 클라이언트 상태 관리 유리

❌ 단점

  • SEO 취약 (HTML에 콘텐츠 없음)
  • 초기 로딩 느림 (JS 다운로드 후 렌더링)

🖥️ 2. SSR (Server-Side Rendering)

📌 렌더링 위치 → 서버
📌 HTML을 서버에서 완성 후 브라우저로 전송

 
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

 

✅ 장점

  • SEO 완벽 대응
  • 최초 렌더링 속도 빠름

❌ 단점

  • 요청마다 서버 렌더링 → 서버 부하 증가
  • 응답 속도는 네트워크 환경 의존

📘 3. SSG (Static Site Generation)

📌 렌더링 위치 → 빌드 시점 (Build-time)
📌 완성된 HTML을 정적으로 생성하여 배포

 
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

 

✅ 장점

  • 속도 매우 빠름 (CDN 캐싱 가능)
  • 서버 부하 없음

❌ 단점

  • 데이터가 바뀌면 재빌드 필요

📌 대표 예시

블로그, 문서 페이지, 랜딩 페이지

🔄 4. ISR (Incremental Static Regeneration)

📌 렌더링 위치 → 빌드 + 주기적 갱신 (Revalidate)

 
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/posts");
  const data = await res.json();
  return {
    props: { data },
    revalidate: 60, // 60초마다 새 데이터 갱신
  };
}

 

✅ 장점

  • SSG의 속도 + SSR의 최신성
  • 캐시 자동 갱신으로 효율적

❌ 단점

  • 실시간성이 필요한 서비스엔 부적합

⚖️ 5. 렌더링 방식 비교

방식 렌더링 시점 SEO 속도 데이터 최신성
CSR 클라이언트 ❌ 느림 ✅
SSR 서버 ✅ 중간 ✅
SSG 빌드 ✅ 매우 빠름 ❌
ISR 빌드+주기적 ✅ 빠름 ✅

🎯 6. 실무 적용 가이드

  • ✅ 블로그 / 마케팅 사이트 → SSG or ISR
  • ✅ 대시보드 / 로그인 페이지 → SSR
  • ✅ 앱 내부 데이터 갱신 많음 → CSR
  • ✅ 뉴스, 실시간 데이터 페이지 → ISR

🧠 7. 보너스: Next.js 최신 구조(App Router 기준)

 
// app/posts/page.tsx
export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 60 }, // ISR 방식
  });
  const posts = await res.json();
  return <PostList posts={posts} />;
}

 

📌 App Router 환경에서는 getStaticProps 대신
fetch()에 next.revalidate 옵션을 줘서 ISR 구현 가능

📝 마무리 정리

  • CSR → 브라우저 렌더링 (SPA 전용)
  • SSR → 요청마다 서버에서 HTML 생성
  • SSG → 빌드 시 정적 페이지 생성
  • ISR → 정적 페이지를 일정 주기로 갱신

👉 “속도 vs 최신성”의 균형이 핵심입니다.
프로젝트 특성에 맞는 렌더링 전략을 세워야 합니다.

반응형