📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 API 호출 및 데이터 페칭 최적화

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 API 호출 및 데이터 페칭 최적화

1. Next.js에서 API 호출이 중요한 이유

쇼핑몰 애플리케이션에서는 상품 목록, 주문 내역, 사용자 정보 등을 백엔드에서 가져와야 합니다.
Next.js에서는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 방식을 선택하여 최적의 데이터 페칭 전략을 적용할 수 있습니다.

✅ 데이터 페칭 최적화의 핵심 목표

• SEO 최적화 (SSR/SSG 활용)
• 빠른 로딩 속도 (캐싱, 데이터 프리페칭)
• 사용자 경험 향상 (로딩 상태 관리, SWR 사용)

💡 이 챕터에서는 Next.js에서 API를 최적화하여 데이터를 불러오는 다양한 방법을 살펴봅니다.

---

2. Next.js에서 API 호출 방식 비교

 

데이터 페칭 방식 설명 사용 사례

SSR (서버 사이드 렌더링)	요청이 발생할 때마다 서버에서 데이터를 가져와 렌더링	SEO가 중요한 상품 상세 페이지
SSG (정적 사이트 생성)	빌드 시 데이터를 미리 가져와 정적 HTML로 생성	검색 엔진에 최적화된 상품 목록 페이지
ISR (증분 정적 생성)	일정 주기로 정적 페이지를 업데이트	자주 변경되는 인기 상품 리스트
CSR (클라이언트 사이드 렌더링)	브라우저에서 API 호출하여 데이터 가져오기	로그인 후 주문 내역, 장바구니

✅ Next.js는 SSR, SSG, CSR을 혼합하여 사용할 수 있어 최적의 성능을 낼 수 있습니다.

---

3. 서버 사이드 렌더링(SSR) - getServerSideProps

반응형

3.1. SSR 개념

SSR(서버 사이드 렌더링)은 요청이 있을 때마다 서버에서 데이터를 가져와 페이지를 생성하는 방식입니다.
SEO(검색 엔진 최적화)가 중요한 페이지(예: 상품 상세 페이지)에 적합합니다.

💡 SSR을 사용한 상품 상세 페이지 (pages/products/[id].tsx)

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return { props: { product } };
}

export default function ProductPage({ product }) {
  return (

{product.name}

{product.description}

가격: {product.price}원

  );
}

✅ 상품 상세 페이지는 검색 엔진이 쉽게 크롤링할 수 있습니다.

---

4. 정적 사이트 생성(SSG) - getStaticProps

4.1. SSG 개념

SSG(정적 사이트 생성)는 빌드 시 데이터를 가져와 미리 HTML을 생성하는 방식입니다.
SEO가 중요한 상품 목록 페이지에서 활용할 수 있으며, 페이지 로딩 속도가 빠릅니다.

💡 SSG를 사용한 상품 목록 페이지 (pages/products.tsx)

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

  return { props: { products } };
}

export default function ProductsPage({ products }) {
  return (

상품 목록

{products.map((product) => (

{product.name}

{product.price}원

))}

  );
}

✅ 상품 목록 페이지가 검색 엔진에 최적화되며, 로딩 속도가 매우 빠릅니다.

---

5. ISR (증분 정적 생성) 적용

5.1. ISR 개념

ISR(Incremental Static Regeneration)은 정적 페이지를 일정 주기로 업데이트하는 방식입니다.

• revalidate 옵션을 사용하여 특정 주기로 데이터를 새로고침할 수 있습니다.
• 자주 변경되는 인기 상품 리스트에 적합합니다.

💡 ISR을 적용한 인기 상품 리스트 (pages/popular-products.tsx)

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/popular-products');
  const products = await res.json();

  return {
    props: { products },
    revalidate: 60, // 60초마다 새 데이터를 가져옴
  };
}

export default function PopularProductsPage({ products }) {
  return (

인기 상품

{products.map((product) => (

{product.name}

{product.price}원

))}

  );
}

✅ ISR을 활용하면 페이지를 실시간으로 갱신하면서도 정적 페이지의 장점을 유지할 수 있습니다.

---

6. 클라이언트 사이드 렌더링(CSR) 적용 - SWR 활용

6.1. SWR을 활용한 실시간 데이터 페칭

Next.js에서 클라이언트 사이드 렌더링(CSR)을 할 때는 **SWR(React Hooks 기반 데이터 패칭 라이브러리)**를 사용할 수 있습니다.
SWR은 자동 캐싱, 재검증, 백그라운드 업데이트 기능을 제공하여 성능을 향상시킵니다.

npm install swr

💡 SWR을 적용한 주문 내역 조회 (pages/orders.tsx)

import useSWR from 'swr';

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

export default function OrdersPage() {
  const { data, error } = useSWR('/api/orders', fetcher);

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

  return (
    <div>
      <h1>주문 내역</h1>
      {data.orders.map((order) => (
        <div key={order.id}>
          <h2>주문 번호: {order.id}</h2>
          <p>총 가격: {order.total}원</p>
        </div>
      ))}
    </div>
  );
}

✅ SWR을 사용하면 네트워크 요청을 최소화하면서 실시간으로 데이터를 갱신할 수 있습니다.

---

7. API 최적화 전략

✅ SEO가 중요한 페이지 → SSR(getServerSideProps) 사용
✅ 변경이 적고 빠른 페이지 → SSG(getStaticProps) 사용
✅ 자주 변경되는 데이터 → ISR(revalidate 옵션) 사용
✅ 실시간 데이터 업데이트 → CSR + SWR 사용

💡 이 방식을 혼합하여 사용하면 최고의 성능과 SEO 효과를 얻을 수 있습니다.

---

🎯 마무리하며

이번 챕터에서는 Next.js에서 다양한 API 호출 방식(SSR, SSG, ISR, CSR)을 활용하여 최적화하는 방법을 다뤘습니다.
다음 단계에서는 4.5. Next.js에서 사용자 인증 및 보안 적용을 다룰 예정입니다. 🚀