Next.js에서 API 데이터 가져오기 및 Data Fetching

1. Next.js에서 Data Fetching의 종류

Next.js에서 데이터 페칭을 하는 방법은 크게 세 가지가 있습니다:
1. getStaticProps
2. getServerSideProps
3. Client-side Fetching

2. getStaticProps

• 용도: 빌드 타임에 데이터를 가져와서 정적 생성(static generation)하는데 사용합니다. 주로 블로그 글, 제품 리스트 등 변경이 자주 일어나지 않는 데이터를 렌더링할 때 유용합니다.

• 예시:

  // pages/index.js
  export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return {
      props: {
        data,
      },
    };
  }
  
  const HomePage = ({ data }) => {
    return (
      <div>
        <h1>Data fetched at build time</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  };
  
  export default HomePage;

3. getServerSideProps

• 용도: 각 요청마다 데이터를 가져와야 하는 경우에 사용합니다. 사용자 인증이 필요한 페이지나, 자주 변경되는 데이터를 다룰 때 유용합니다.

• 예시:

  // pages/dashboard.js
  export async function getServerSideProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return {
      props: {
        data,
      },
    };
  }
  
  const DashboardPage = ({ data }) => {
    return (
      <div>
        <h1>Data fetched on each request</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  };
  
  export default DashboardPage;

4. Client-side Fetching

• 용도: 컴포넌트가 마운트된 후에 데이터를 가져올 때 사용합니다. 사용자 인터렉션에 따라 데이터를 가져오거나, 특정 조건에서만 데이터를 가져와야 할 때 유용합니다.

• 예시:

  // pages/profile.js
  import { useEffect, useState } from 'react';
  
  const ProfilePage = () => {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      const fetchData = async () => {
        const res = await fetch('https://api.example.com/data');
        const result = await res.json();
        setData(result);
      };
  
      fetchData();
    }, []);
  
    return (
      <div>
        <h1>Data fetched on client-side</h1>
        {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
      </div>
    );
  };
  
  export default ProfilePage;

5. 기타 유용한 정보

• Incremental Static Regeneration (ISR): getStaticProps와 함께 사용하여 정적 페이지를 일정 시간마다 다시 생성할 수 있습니다.

  export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
  
    return {
      props: {
        data,
      },
      revalidate: 10, // 10초마다 페이지 재생성
    };
  }

• SWR: Client-side Fetching을 더 쉽게 해주는 React Hook 라이브러리로, 데이터 캐싱, 리페칭 등을 지원합니다.

  import useSWR from 'swr';
  
  const fetcher = (url) => fetch(url).then((res) => res.json());
  
  const ProfilePage = () => {
    const { data, error } = useSWR('https://api.example.com/data', fetcher);
  
    if (error) return <div>Failed to load</div>;
    if (!data) return <div>Loading...</div>;
  
    return (
      <div>
        <h1>Data fetched with SWR</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  };
  
  export default ProfilePage;