[Next.js14 강의] 11강 - 데이터 Fetching의 필요성 이해

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js에서 데이터 Fetching이 왜 중요한지 이해하고, 다양한 Fetching 방법에 대해 소개합니다. 이를 통해 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드에서 데이터를 가져오는 방법을 비교하고, 각 방법이 적합한 상황을 알아봅니다.

 

 

1. 데이터 Fetching이란 무엇인가?

 

데이터 Fetching의 개념

데이터 Fetching은 애플리케이션에서 필요한 데이터를 서버로부터 가져오는 과정입니다. 예를 들어, 사용자의 프로필 정보, 게시글 목록, 상품 데이터 등을 가져오는 것이 이에 해당합니다.

 

데이터 Fetching의 중요성

· 웹 애플리케이션은 동적인 콘텐츠를 제공해야 할 때가 많습니다. 이때 데이터 Fetching을 통해 서버로부터 최신 데이터를 받아와 사용자에게 보여줄 수 있습니다.
· 효율적인 데이터 Fetching은 성능 최적화, 사용자 경험 개선, SEO 향상 등 여러 가지 이점을 제공합니다.

 

 

2. Next.js에서 데이터 Fetching이 중요한 이유

 

서버사이드 렌더링(SSR)과 SEO 최적화

Next.js의 SSR은 요청 시 서버에서 페이지를 생성하여, 완전한 HTML을 클라이언트에 전달합니다. 이를 통해 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있어 SEO가 최적화됩니다.

반응형

정적 사이트 생성(SSG)와 빠른 페이지 로드

SSG는 빌드 시점에 정적인 HTML 파일을 생성하여 매우 빠른 페이지 로드를 제공합니다. 블로그나 문서 사이트와 같은 콘텐츠가 자주 변경되지 않는 페이지에 적합합니다.

 

클라이언트 사이드 데이터 Fetching과 사용자 경험 개선

클라이언트 사이드에서 데이터를 Fetching하면 페이지 로드 후 필요한 데이터를 비동기로 가져와 사용할 수 있습니다. 이를 통해 페이지의 첫 로드 시간을 줄이고, 사용자와의 인터랙션에서 필요한 데이터를 실시간으로 업데이트할 수 있습니다.

 

 

3. Next.js의 데이터 Fetching 방식 소개

Next.js에서는 데이터 Fetching을 위해 다양한 메서드를 제공합니다. 이들은 SSR, SSG, 클라이언트 사이드 데이터 Fetching의 각각의 요구사항에 맞게 사용됩니다.

 

getStaticProps (SSG: 정적 사이트 생성)

빌드 시 정적으로 데이터를 가져와 HTML 페이지를 생성합니다. 데이터가 자주 변경되지 않는 페이지에 적합합니다.

// pages/blog/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

728x90

getServerSideProps (SSR: 서버사이드 렌더링)

각 요청마다 서버에서 데이터를 Fetching하여 페이지를 렌더링합니다. 실시간 데이터를 보여줘야 하는 페이지에 적합합니다.

// pages/profile.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user/profile');
  const profile = await res.json();

  return {
    props: { profile },
  };
}

 

 

클라이언트 사이드 데이터 Fetching (CSR: 클라이언트 사이드 렌더링)

useEffect와 같은 React 훅을 사용하여 클라이언트에서 데이터를 Fetching합니다. 페이지 로드 후 데이터를 동적으로 업데이트해야 하는 경우에 유용합니다.

// components/Posts.js
import { useState, useEffect } from 'react';

export default function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

 

 

4. 각 데이터 Fetching 방식의 장단점

 

getStaticProps (SSG)

· 장점: 매우 빠른 초기 로딩 속도, 캐싱 및 CDN 사용이 가능하여 비용 효율적입니다.
· 단점: 데이터가 자주 변경되는 경우 적합하지 않으며, 빌드 시간이 길어질 수 있습니다.

SMALL

getServerSideProps (SSR)

· 장점: 항상 최신 데이터를 제공하며, SEO에 매우 유리합니다.
· 단점: 매 요청마다 서버에서 렌더링하므로 초기 로딩 시간이 길어질 수 있습니다.

 

클라이언트 사이드 데이터 Fetching (CSR)

· 장점: 사용자와의 인터랙션에서 데이터를 동적으로 업데이트할 수 있으며, 초기 로딩 시간을 줄일 수 있습니다.
· 단점: 데이터가 로드되기 전까지 로딩 스피너나 빈 화면이 표시될 수 있어 사용자 경험이 저하될 수 있습니다.

 

 

5. 데이터 Fetching 방법 선택하기

 

프로젝트 요구사항에 따라 선택하기

· 데이터가 자주 변경되지 않는 경우: getStaticProps를 사용하여 정적 사이트를 생성합니다.
· 사용자 맞춤형 데이터를 제공해야 하는 경우: getServerSideProps를 사용하여 서버사이드 렌더링을 합니다.
· 동적 인터랙션이 필요한 경우: 클라이언트 사이드 데이터 Fetching을 사용합니다.

혼합 사용 가능성

Next.js에서는 한 프로젝트에서 여러 Fetching 방법을 혼합하여 사용할 수 있습니다. 예를 들어, 공통 헤더와 푸터는 getStaticProps로 가져오고, 메인 콘텐츠는 getServerSideProps로 실시간 데이터를 제공할 수 있습니다.

 

이번 강의에서는 Next.js에서 데이터 Fetching의 중요성을 이해하고, 다양한 Fetching 방법에 대해 살펴보았습니다. 각 Fetching 방법이 적합한 상황을 고려하여 프로젝트에 적용함으로써 최적의 성능과 사용자 경험을 제공할 수 있습니다.

 

 

 

 

 

- 이전 수업 목록