🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js 개요 및 특징

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js 개요 및 특징

이번 글에서는 Next.js의 개념과 특징, 그리고 React와의 차이점을 설명합니다.
✅ Next.js가 무엇인지 이해하고, 기존 React와 비교하여 어떤 점이 다른지 살펴보겠습니다.

---

📌 1. Next.js란?

✅ Next.js 개념

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 것이 핵심 특징입니다.
Vercel에서 개발하였으며, SEO 최적화, 성능 개선, 개발 편의성을 강화한 React의 업그레이드 버전으로 볼 수 있습니다.

✅ Next.js의 주요 특징

1. 서버 사이드 렌더링 (SSR) → 서버에서 데이터를 받아 페이지를 렌더링한 후 클라이언트에 전달
2. 정적 사이트 생성 (SSG) → 빌드 시 미리 생성된 정적 HTML을 제공하여 빠른 응답 속도 제공
3. API Routes 지원 → 백엔드 없이도 간단한 API를 Next.js에서 직접 구현 가능
4. SEO 최적화 → SSR 및 SSG를 활용하여 검색 엔진에 친화적인 페이지 제공
5. 이미지 최적화 (next/image) → 자동으로 WebP 변환 및 지연 로딩(Lazy Loading) 지원
6. 자동 코드 분할 (Code Splitting) → 필요한 코드만 로드하여 성능 향상
7. 파일 기반 라우팅 → 기존 React의 react-router-dom 없이, pages 디렉토리 구조만으로 자동 라우팅 제공

---

📌 2. Next.js vs React 차이점

✅ 2.1 React (CRA) vs. Next.js

비교 항목	React (CRA)	Next.js
렌더링 방식	CSR(클라이언트 사이드 렌더링)	CSR, SSR, SSG, ISR 모두 지원
라우팅 방식	react-router-dom 필요	파일 기반 라우팅
SEO 지원	제한적 (CSR 기반)	우수 (SSR 및 SSG 활용)
API 엔드포인트	별도 백엔드 필요	pages/api/에서 API 구현 가능
이미지 최적화	직접 처리해야 함	next/image 지원
빌드 속도	상대적으로 느림	정적 빌드 (SSG)로 빠름
코드 스플리팅	React.lazy() 사용	자동 코드 스플리팅
설정 복잡성	간단하지만 추가 설정 필요	설정 없이 기본 최적화 제공

✅ Next.js는 CSR(클라이언트 렌더링)뿐만 아니라 SSR, SSG 등 다양한 렌더링 방식을 제공하여 유연한 개발이 가능합니다.

---

📌 3. Next.js의 렌더링 방식

반응형

✅ 3.1 CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)

• 브라우저에서 React 애플리케이션을 다운로드한 후, JavaScript가 실행되면서 페이지를 렌더링
• 초기 로딩 속도가 느리며, 검색 엔진 최적화(SEO)에 불리함

// React (CSR)
import { useState, useEffect } from "react";

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

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

  return <div>{data ? data.message : "Loading..."}</div>;
}

---

✅ 3.2 SSR (Server-Side Rendering, 서버 사이드 렌더링)

• 페이지 요청 시, 서버에서 데이터를 가져와 HTML을 생성 후 브라우저에 전달
• SEO 최적화에 유리하며, 초기 로딩 속도가 빠름

// Next.js (SSR)
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 <div>{data.message}</div>;
}

✅ SSR은 매 요청마다 서버에서 HTML을 생성하므로, 실시간 데이터가 필요한 경우 적합합니다.

---

✅ 3.3 SSG (Static Site Generation, 정적 사이트 생성)

• 빌드 시점에 HTML을 미리 생성하여 제공
• 페이지 로딩 속도가 매우 빠르며, SEO 최적화에 최적

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

  return {
    props: { data },
    revalidate: 10, // 10초마다 새롭게 데이터를 가져옴
  };
}

export default function Page({ data }) {
  return <div>{data.message}</div>;
}

✅ SSG는 변경되지 않는 페이지(블로그, 문서 등)에 적합하며, 성능 최적화에 유리합니다.

---

✅ 3.4 ISR (Incremental Static Regeneration, 증분 정적 사이트 생성)

• 기존 SSG와 비슷하지만, 빌드 후에도 특정 시간마다 정적 페이지를 업데이트 가능

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

  return {
    props: { data },
    revalidate: 60, // 1분마다 데이터 업데이트
  };
}

export default function Page({ data }) {
  return <div>{data.message}</div>;
}

✅ ISR은 정적 페이지의 빠른 속도를 유지하면서도 최신 데이터를 주기적으로 업데이트할 수 있는 방법입니다.

---

📌 4. Next.js의 강력한 기능

✅ 4.1 파일 기반 라우팅

• pages/ 폴더 내 파일을 생성하면 자동으로 라우팅이 적용됨
• pages/index.tsx → / 경로로 자동 매핑
• pages/about.tsx → /about 경로로 자동 매핑

// pages/about.tsx
export default function About() {
  return <h1>About Page</h1>;
}

✅ React의 react-router-dom을 사용할 필요 없이 간단한 파일 구조만으로 라우팅이 가능

---

✅ 4.2 API Routes (백엔드 API 구현 가능)

• Next.js에서는 pages/api/ 폴더에 파일을 생성하면 API 엔드포인트를 구현 가능
• FastAPI 없이도 간단한 API를 Next.js 내부에서 처리 가능

// pages/api/hello.ts
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from Next.js API!" });
}

✅ 클라이언트와 백엔드를 하나의 프로젝트에서 관리 가능 (Full-Stack 개발 가능)

---

📌 5. 결론 및 다음 단계

✅ Next.js는 React의 기능을 확장하여 SSR, SSG, ISR을 지원하는 강력한 프레임워크입니다.
✅ SEO 최적화, API Routes, 이미지 최적화 등의 기능을 활용하면 더 나은 성능을 제공할 수 있습니다.
✅ 이제 Next.js 개발 환경을 설정하고 프로젝트를 생성해 보겠습니다! 🚀

🚀 다음 글에서는 "3.1.2 Next.js 프로젝트 설정 및 필수 패키지 설치"를 진행합니다!