4. Fetch

Next.jsは、さまざまなタイミングでデータをフェッチするためのメソッドを提供しています。これにより、ビルド時、リクエスト時、またはクライアントサイドでデータを取得できます。

getStaticProps

getStaticPropsは、ビルド時にデータをフェッチし、静的に生成されたページを提供します。主に静的サイト生成（SSG）に使用されます。

使用例

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data from getStaticProps</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

getServerSideProps

getServerSidePropsは、リクエストごとにデータをフェッチし、サーバーサイドレンダリング（SSR）されたページを提供します。動的なデータが必要な場合に使用されます。

使用例

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

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data from getServerSideProps</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

getStaticPaths

getStaticPathsは、動的ルートを持つページで使用され、どのパスが生成されるべきかを指定します。主に静的サイト生成（SSG）で動的ルートを扱う場合に使用されます。

使用例

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

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

  return {
    props: {
      post,
    },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Client-side Fetching

クライアントサイドでデータをフェッチする場合、標準的なReactの手法を使用します。例えば、useEffectフックとfetchを組み合わせてデータを取得します。

使用例

import { useEffect, useState } from 'react';

export default function ClientSideData() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data fetched on client-side</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

ISR（Incremental Static Regeneration）

ISR（Incremental Static Regeneration）は、静的生成と動的データフェッチを組み合わせ、ビルド後もページのコンテンツを更新する機能です。特定のインターバルで再生成を行います。

使用例

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 60, // 60秒ごとにページを再生成
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data with ISR</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

---

このように進めていきます。他に追加や修正の希望があればお知らせください。