Next.js와 React의 렌더링 차이

1️⃣ React (CRA) 렌더링 방식

React의 기본적인 렌더링 방식은 CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)이다.

✅ 클라이언트 사이드 렌더링(CSR)

📌 동작 방식

1. 초기 로딩 시 빈 HTML 파일을 받음
2. JavaScript 번들을 다운로드 후 실행하여 화면을 구성
3. API 호출을 통해 데이터를 가져오고 UI를 업데이트

📌 장점
✔ 초기 개발이 간단하고 빠름
✔ 동적인 인터랙션이 많을 때 적합
✔ 서버 부하가 적음

📌 단점
❌ 초기 로딩 속도가 느림 (JS 다운로드 및 실행 후 화면 렌더링)
❌ SEO(Search Engine Optimization) 최적화가 어려움 (HTML이 비어 있음)
❌ TTFB(Time To First Byte) 속도가 느림

📌 CSR 예제 (React + CRA)

import { useEffect, useState } from "react";

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>;

  return <h1>{data.title}</h1>;
}

useEffect를 이용해 클라이언트에서 데이터를 가져옴 → 초기 화면이 비어 있다가 나중에 데이터가 채워짐.

 

2️⃣ Next.js 렌더링 방식

Next.js는 React의 CSR 방식 외에도 SSR(Server-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration) 등의 렌더링 전략을 제공한다.

✅ 1. 서버 사이드 렌더링(SSR)

📌 동작 방식

1. 사용자가 페이지 요청
2. Next.js 서버에서 미리 HTML을 생성하여 응답
3. 브라우저는 완성된 HTML을 받아 즉시 렌더링
4. 이후 클라이언트에서 React가 하이드레이션(Hydration) 진행

📌 장점
✔ SEO에 최적화됨 (완전한 HTML이 제공됨)
✔ 첫 번째 페이지 로딩 속도가 빠름 (서버에서 HTML 생성 후 제공)
✔ 매 요청마다 최신 데이터를 가져올 수 있음

📌 단점
❌ 서버 부담이 증가 (요청마다 HTML을 생성해야 함)
❌ API 호출이 많을 경우 성능 저하 가능

📌 SSR 예제 (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 Page({ data }) {
  return <h1>{data.title}</h1>;
}

getServerSideProps를 사용하여 매 요청마다 서버에서 데이터를 가져와 렌더링

 

✅ 2. 정적 사이트 생성(SSG)

📌 동작 방식

1. 빌드 타임에 미리 HTML을 생성
2. 이후 요청 시 정적인 HTML을 그대로 제공

📌 장점
✔ 가장 빠름 (요청 시 서버 로드 없이 정적 파일 제공)
✔ SEO 최적화 가능
✔ 서버 부하가 거의 없음

📌 단점
❌ 실시간 데이터 반영이 어려움 (빌드 시 데이터가 고정됨)
❌ 정적인 페이지에 적합 (동적 변경이 많은 경우 적합하지 않음)

📌 SSG 예제 (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 Page({ data }) {
  return <h1>{data.title}</h1>;
}

getStaticProps를 사용하여 빌드 시 데이터를 가져와 정적인 HTML을 생성

 

✅ 3. ISR (Incremental Static Regeneration)

📌 동작 방식

• SSG + 일정 주기마다 정적 페이지를 갱신
• revalidate 값을 설정하여 일정 시간이 지나면 새로운 HTML을 생성

📌 장점
✔ SSG처럼 빠르면서도 실시간 데이터 업데이트 가능
✔ 자주 변경되는 데이터에도 적합

📌 ISR 예제 (Next.js)

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

  return { props: { data }, revalidate: 10 }; // 10초마다 새로 갱신
}

revalidate: 10을 설정하면 10초마다 데이터를 갱신하여 최신 데이터를 유지하면서도 빠르게 제공 가능

 

🎯 React vs Next.js 렌더링 차이 정리

렌더링 방식	React (CRA)	Next.js
CSR(클라이언트 사이드 렌더링)	✅ 기본 렌더링 방식	✅ 지원
SSR(서버 사이드 렌더링)	❌ 미지원	✅ 지원 (getServerSideProps)
SSG(정적 사이트 생성)	❌ 미지원	✅ 지원 (getStaticProps)
ISR(증분 정적 생성)	❌ 미지원	✅ 지원 (revalidate 옵션)
SEO	❌ 어렵다 (JS 실행 후 렌더링)	✅ SSR/SSG 사용 시 최적화 가능
초기 로딩 속도	⏳ 느림	🚀 빠름 (SSR/SSG 사용 시)

🔥 결론

✅ React (CRA) 는 기본적으로 CSR(Client-Side Rendering) 을 사용하며, 클라이언트에서 모든 데이터를 처리하기 때문에 초기 로딩 속도가 느리고 SEO가 어려움. 하지만 인터랙티브한 웹앱에는 적합.

✅ Next.js 는 SSR, SSG, ISR 등의 다양한 렌더링 전략을 제공하여 SEO 최적화가 가능하고, 초기 로딩 속도가 빠름. 특히 정적 사이트(SSG)나 블로그, SEO가 중요한 웹사이트에 적합.

📌 정리하면?

• ✅ SPA (싱글 페이지 앱) → React (CSR)
• ✅ SEO 중요 + 실시간 데이터 → Next.js (SSR)
• ✅ 정적 블로그, 문서 사이트 → Next.js (SSG)
• ✅ 빠른 성능 + 최신 데이터 필요 → Next.js (ISR)

👉 프로젝트 성격에 따라 React와 Next.js를 적절히 선택하는 것이 중요!