Next.js 기초 <4. Next.js 15에서 데이터 패칭 (SSR, SSG, ISR, RSC 개념 완벽 정리)>

넥스트 Next.js

4. Next.js 15에서 데이터 패칭 (SSR, SSG, ISR, RSC 개념 완벽 정리) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 데이터 패칭이 중요한 이유

Next.js 15는 React 기반의 풀스택 프레임워크로, 데이터를 가져오는 방식에 따라 성능, SEO, 사용자 경험이 크게 달라진다.
따라서 어떤 데이터 패칭 방식(SSR, SSG, ISR, RSC)을 사용할지 정확히 이해하는 것이 중요하다.

📌 Next.js 15 데이터 패칭 특징
✔ 서버 사이드 렌더링(SSR) → 요청 시 데이터를 서버에서 가져와 페이지 렌더링
✔ 정적 사이트 생성(SSG) → 빌드 시 데이터를 가져와 정적인 HTML 파일 생성
✔ 점진적 정적 생성(ISR) → 필요할 때만 정적 페이지를 다시 생성
✔ 서버 컴포넌트(Server Components, RSC) → 서버에서 데이터를 패칭하고 클라이언트에 전달

✅ Next.js 15 데이터 패칭 방식 비교

구분SSR (서버 사이드 렌더링)SSG (정적 사이트 생성)ISR (점진적 정적 생성)RSC (서버 컴포넌트)

실행 시점	요청 시마다 서버에서 실행	빌드 시 실행	요청 시 필요할 때만 정적 페이지 재생성	서버에서만 실행
SEO	✅ 매우 좋음	✅ 매우 좋음	✅ 매우 좋음	✅ 매우 좋음
데이터 최신성	✅ 항상 최신 데이터 제공	❌ 빌드 이후 변경 불가	✅ 일정 시간마다 최신 데이터 제공	✅ 항상 최신 데이터 제공
성능	❌ 서버 부하 높음	✅ 가장 빠름	✅ 빠름	✅ 매우 빠름
사용 예시	로그인 페이지, 실시간 데이터	블로그, 문서, 제품 상세	뉴스, 데이터가 자주 변경되는 사이트	대부분의 페이지에서 사용 가능

📌 Next.js 15에서는 "서버 컴포넌트(RSC)"가 기본이며, SSR, SSG, ISR도 함께 활용 가능하다!

---

2. Next.js 15에서 데이터 패칭 방식 적용하기

✅ 1) 서버 사이드 렌더링(SSR) 예제 (app/news/page.tsx)

async function getNews() {
  const res = await fetch("https://api.example.com/news", { cache: "no-store" });
  return res.json();
}

export default async function NewsPage() {
  const news = await getNews();

  return (
    <main>
      <h1>📰 최신 뉴스</h1>
      <ul>
        {news.map((article: any) => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </main>
  );
}

📌 cache: "no-store" 옵션을 사용하면, 매 요청마다 서버에서 데이터를 가져오므로 SSR이 적용된다.
📌 SEO가 중요한 동적 콘텐츠에 적합하다.

---

✅ 2) 정적 사이트 생성(SSG) 예제 (app/blog/page.tsx)

async function getBlogPosts() {
  const res = await fetch("https://api.example.com/blog");
  return res.json();
}

export default async function BlogPage() {
  const posts = await getBlogPosts();

  return (
    <main>
      <h1>📝 블로그</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

📌 정적 페이지는 빌드 시 생성되므로 속도가 매우 빠르며, SEO에 강하다.
📌 fetch()의 기본 설정이 cache: "force-cache"이므로 Next.js 15에서는 자동으로 SSG가 적용된다.

---

✅ 3) 점진적 정적 생성(ISR) 예제 (app/articles/page.tsx)

async function getArticles() {
  const res = await fetch("https://api.example.com/articles", { next: { revalidate: 60 } });
  return res.json();
}

export default async function ArticlesPage() {
  const articles = await getArticles();

  return (
    <main>
      <h1>📜 최신 기사</h1>
      <ul>
        {articles.map((article: any) => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </main>
  );
}

📌 ISR을 사용하면, 60초마다 새로운 데이터를 가져와 페이지를 업데이트할 수 있다.
📌 데이터가 자주 변경되지만, 모든 요청마다 새로 데이터를 가져올 필요는 없을 때 적합하다.

---

✅ 4) 서버 컴포넌트(Server Components, RSC) 예제 (app/products/page.tsx)

async function getProducts() {
  const res = await fetch("https://api.example.com/products");
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <main>
      <h1>🛒 제품 목록</h1>
      <ul>
        {products.map((product: any) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </main>
  );
}

📌 Next.js 15에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트(Server Component)이므로, 서버에서 데이터를 직접 패칭할 수 있다.
📌 서버에서 데이터를 가져오기 때문에 클라이언트 번들 크기가 줄어들고, 성능이 최적화된다.

---

✅ 여기까지 Next.js 15의 데이터 패칭 개념과 방식(SSR, SSG, ISR, RSC)을 적용하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 클라이언트에서 데이터를 가져올 때는 어떻게 해야 할까?"
✅ 2부에서 Next.js 15의 클라이언트 데이터 패칭과 SWR, React Query 사용법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 클라이언트 사이드 데이터 패칭이 필요한 경우

Next.js 15에서는 기본적으로 서버에서 데이터를 가져오는 방식(RSC, SSR)을 추천하지만,
일부 경우에는 클라이언트에서 데이터를 가져와야 하는 경우도 있다.

📌 클라이언트 데이터 패칭이 필요한 경우
✔ 사용자의 상호작용(버튼 클릭, 필터 적용 등)에 따라 데이터를 가져와야 할 때
✔ 실시간 데이터(웹소켓, 실시간 댓글 등)가 필요할 때
✔ 빈번한 데이터 업데이트가 필요한 경우 (ex: 주식 시세, 실시간 뉴스)

---

2. 클라이언트 데이터 패칭 방법 비교 (useEffect, SWR, React Query)

✅ 1) useEffect로 클라이언트에서 데이터 가져오기

import { useEffect, useState } from "react";

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

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

  return (
    <div>
      <h1>📡 클라이언트 데이터 패칭</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

📌 가장 기본적인 방식이지만, useEffect는 비효율적일 수 있음!

✅ 2) SWR을 사용한 데이터 패칭 (자동 캐싱, 리패칭 지원)

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((res) => res.json());

export default function SWRFetch() {
  const { data, error } = useSWR("https://api.example.com/data", fetcher);

  if (error) return <div>에러 발생!</div>;
  if (!data) return <div>로딩 중...</div>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

📌 SWR은 데이터 캐싱과 자동 업데이트 기능을 제공!

✅ 3) React Query를 사용한 데이터 패칭 (더 강력한 상태 관리)

import { useQuery } from "@tanstack/react-query";

export default function ReactQueryFetch() {
  const { data, isLoading, error } = useQuery(["data"], async () =>
    fetch("https://api.example.com/data").then((res) => res.json())
  );

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생!</div>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

📌 React Query는 서버 상태 관리에 최적화되어 있음!

---

✅ 여기까지 Next.js 15의 데이터 패칭과 클라이언트 데이터 패칭 방식을 배웠습니다!
👉 "그렇다면, Next.js 15에서 스타일링은 어떻게 할까?"
✅ 다음 회차에서 Next.js 15의 CSS, Tailwind, styled-components 사용법을 배워봅시다! 🚀