티스토리 뷰

project/로컬 LLM + RAG 기반 AI 채팅봇 만들기

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식)

octo54 2025. 2. 27. 14:35

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식)

이번 글에서는 Next.js 13+ App Router에서 데이터를 가져오는 방법과 함께 React Query 사용 시 발생하는 No QueryClient set 오류를 해결하는 방법을 다룹니다.
✅ 서버 컴포넌트 및 클라이언트 컴포넌트에서 데이터 패칭을 수행하는 최적의 방법을 설명합니다.
✅ React Query에서 QueryClientProvider를 올바르게 설정하는 방법을 실습합니다.

📌 1. Next.js 13+ App Router에서의 데이터 패칭 개요

Next.js 13+ App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트를 명확하게 구분해야 합니다.

서버 사이드 데이터 패칭 (Server Components) → fetch를 서버 컴포넌트에서 호출
클라이언트 사이드 데이터 패칭 (Client Components) → useEffect 또는 React Query 사용
정적 생성 (Static Rendering) → fetch를 async로 서버 컴포넌트에서 실행
React Query를 활용한 상태 기반 데이터 캐싱

이제 이러한 전략을 활용하여 실습해보겠습니다.

📌 2. React Query

✅ 2.1 QueryClientProvider

React Query를 Next.js App Router에서 사용하려면 최상위에 QueryClientProvider를 감싸야 합니다.
이전 코드에서는 QueryClientProvider 없이 useQuery를 호출하여 No QueryClient set 오류가 발생한 것입니다.

📌 Step 1: app/providers.tsx 파일 생성 (React Query 설정)

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode, useState } from "react";

export default function Providers({ children }: { children: ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

📌 Step 2: app/layout.tsx에서 Providers 적용

import Providers from "./providers";

export const metadata = {
  title: "FastAPI 기반 로컬 LLM + RAG 챗봇",
  description: "FastAPI, Next.js, PostgreSQL 및 pgvector를 활용한 RAG 챗봇 프로젝트",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

✅ 이제 모든 클라이언트 컴포넌트에서 React Query를 사용할 수 있습니다! 🚀

📌 3. React Query를 활용한 클라이언트 데이터 패칭

📌 app/products/page.tsx (React Query 활용하여 API 요청)

"use client"; // 클라이언트 컴포넌트 선언

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

const fetchProducts = async () => {
  const res = await fetch("https://fakestoreapi.com/products");
  return res.json();
};

export default function Products() {
  const { data: products, isLoading, error } = useQuery({
    queryKey: ["products"],
    queryFn: fetchProducts,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>오류 발생!</p>;

  return (
    <div>
      <h1>상품 목록 (React Query 활용)</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ 이제 No QueryClient set 오류 없이 React Query가 정상 동작합니다! 🚀

📌 4. 서버 사이드 데이터 패칭 (Server Components) – fetch 활용

📌 app/products/page.tsx (서버 사이드 데이터 패칭 예제)

export default async function Products() {
  const res = await fetch("https://fakestoreapi.com/products");
  const products = await res.json();

  return (
    <div>
      <h1>상품 목록</h1>
      <ul>
        {products.map((product: any) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ 서버 컴포넌트에서는 fetch를 직접 사용하여 데이터를 불러올 수 있습니다! 🚀

📌 5. 정적 생성 (SSG) – fetch + revalidate

📌 app/blog/page.tsx (SSG + revalidate 예제)

export default async function Blog() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    next: { revalidate: 60 }, // 60초마다 데이터 갱신
  });
  const posts = await res.json();

  return (
    <div>
      <h1>블로그 목록</h1>
      <ul>
        {posts.slice(0, 5).map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ 빌드 시점에 데이터를 생성하지만, 60초마다 자동 갱신됩니다! 🚀

📌 6. 최적의 데이터 패칭 전략 선택하기

서버 사이드 데이터 패칭 (SSR)	로그인 정보, 실시간 데이터	서버에서 매 요청마다 새 데이터 로딩
클라이언트 데이터 패칭 (CSR)	사용자 맞춤 데이터, 검색 API	useEffect, React Query 활용
정적 생성 (SSG)	블로그, 문서 페이지	빌드 시점에 생성, 성능 최적화
React Query	캐싱, 무한 스크롤	클라이언트에서 비동기 데이터 관리

✅ 각 데이터 패칭 방식의 장단점을 이해하고, 프로젝트 요구 사항에 맞는 최적의 방식을 선택하세요! 🚀

📌 7. 결론 및 다음 단계

✅ Next.js App Router 방식에서의 데이터 패칭 방법을 학습했습니다.
✅ React Query에서 QueryClientProvider가 필요함을 이해하고, providers.tsx를 추가하여 오류를 해결했습니다.
✅ 서버 컴포넌트에서 데이터를 가져오는 방법(fetch)을 배웠습니다.
✅ 클라이언트 컴포넌트에서 데이터를 불러오는 방법(useEffect, React Query)을 비교했습니다.
✅ SSG + revalidate를 활용한 데이터 캐싱 방법을 이해했습니다.

🚀 다음 글에서는 "3.3 Next.js 상태 관리 및 전역 데이터 관리"를 진행합니다!

📢 추천 태그 (SEO 최적화)

Next.js, React, 데이터 패칭, SSR, CSR, SSG, React Query, useEffect, fetch, App Router, API 요청 최적화, QueryClientProvider 오류 해결

'project > 로컬 LLM + RAG 기반 AI 채팅봇 만들기' 카테고리의 다른 글

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Zustand를 활용한 전역 상태 관리 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js에서의 상태 관리 개요 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 페이지 및 레이아웃 구성 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js의 라우팅 시스템 개요 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Tailwind CSS 및 UI 라이브러리 설정 (DaisyUI + ShadCN 반영) (0)	2025.02.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

TwentyTwentyOne

티스토리 뷰