PromleeBlog
sitemap
aboutMe

posting thumbnail
Next.js 데이터 패칭 완전 정복 1 - 개요와 기본 개념
Complete Guide to Data Fetching in Next.js 1 - Overview and Core Concepts

📅
🚀 들어가기 전에
🚀 데이터 패칭 개요
✅ 언제 어디서 데이터를 패칭해야 할까요?
🚀 fetch 함수 기본
🚀 fetch 동작 방식과 특징
🚀 결론
✅ 더 생각해 보기
✅ 참고
🚀

들어가기 전에 🔗

Nextjs 15버전을 기준으로 작성되었습니다. 이후 버전에서는 일부 내용이 변경될 수 있습니다.
Next.js의 App Router는 최신 React 기능과 결합되어 서버 중심의 데이터 패칭 방식을 제공합니다. 이를 통해 더욱 효율적이고 빠른 웹 애플리케이션을 만들 수 있습니다. 이번 시리즈에서는 이 기능을 깊이 있게 다루며, 기본 개념부터 고급 사용법까지 함께 학습하겠습니다.
이번 1부에서는 다음 내용을 다룹니다:
🚀

데이터 패칭 개요 🔗

Next.js의 App Router는 React의 서버 컴포넌트(SSR)를 기반으로 작동합니다. 서버 컴포넌트에서는 브라우저에서 사용할 수 없는 서버 전용 기능을 사용할 수 있으며, 그 중 하나가 데이터 패칭입니다.
Next.js는 기본적으로
서버에서 데이터를 패칭하는 방식
을 권장합니다. 서버에서 데이터를 가져오면 클라이언트에 전달되는 HTML이 미리 완성되므로, 페이지 로딩 속도와 SEO에 유리합니다.
✅

언제 어디서 데이터를 패칭해야 할까요? 🔗

Next.js에서 데이터를 가져올 수 있는 위치는 다음과 같습니다:
🚀

fetch 함수 기본 🔗

Next.js에서 데이터를 가져올 때 가장 많이 사용하는 함수는 바로 fetch입니다. 이는 브라우저의 기본 fetch와 거의 동일하지만, Next.js에서는 특별한 방식으로 작동합니다.
예를 들어 JSONPlaceholder API에서 게시글 데이터를 가져오는 코드는 다음과 같습니다:
app/page.tsx
export default async function Page() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
이 코드는 서버 컴포넌트에서 작동하며, HTML 렌더링 전에 데이터를 가져오게 됩니다. 이 방식은 클라이언트 측에서 데이터를 패칭하고 로딩 상태를 보여주는 방식보다 더 빠르고 안정적인 사용자 경험을 제공합니다.
🚀

fetch 동작 방식과 특징 🔗

Next.js의 fetch는 다음과 같은 특징을 가집니다:
이러한 설정은 다음 파트에서 자세히 다루도록 하겠습니다.
🚀

결론 🔗

이번 파트에서는 Next.js에서의 데이터 패칭이 어떻게 동작하는지, 어떤 위치에서 수행할 수 있는지, 그리고 fetch 함수의 기본적인 사용법에 대해 배웠습니다. 서버 컴포넌트를 통해 데이터를 사전에 렌더링하는 방식은 성능과 SEO 모두에 이점을 제공합니다.
다음 파트에서는 fetch 함수의 고급 옵션들과 캐싱 동작, ISR 등에 대해 알아보겠습니다.
✅

더 생각해 보기 🔗

✅

참고 🔗