fetchをNext.jsで使うパターンまとめ

こんにちは！

今回はfetchをNext.jsで使うパターンについてまとめます。

個人的に見かけるパターンをまとめただけなので、特に名前がついているわけではないです。

fetchをNext.jsで使うパターン

今回は次の3パターンについてまとめる

Then+catchパターン
Async+Await+useEffect+useStateパターン
Async+Await+Asyncコンポーネントパターン

1. Then+catchパターン

次のようなパターンのことである。

function fetchData(): Promise<Data[]> {
  return fetch("https://...")
    .then((response) => response.json());
}

export default function Home() {
  const [data, setData] = useState<Data[] | null>(null);

  useEffect(() => {
    const fetchDataAndSet = () => {
      fetchData()
        .then((response) => setData(response))
        .catch((error) => {          
          console.log("error", error);
        });
    };
    fetchDataAndSet();
  }, []);

thenとcatchで記述したパターン
thenとcatchだけでもメソッドチェーンのような形になる

2. Async+Await+useEffect+useStateパターン

次のようなパターンのことである。

async function fetchData(): Promise<Data[]> {
  const response = await fetch("https://...");
  return response.json();
}

export default function Home() {
  const [data, setData] = useState<Data[] | null>(null);

  useEffect(() => {
    const fetchDataAndSet = async () => {
      try {
        const response = await fetchData();
        setData(response);
      } catch (error) {
        console.error("error", error);
      }
    };
    fetchDataAndSet();
  }, []);
}

asyncとawaitを使ったパターン
通常の同期処理のようにtry、catchで記述できる

3. Async+Await+Asyncコンポーネントパターン

次のようなパターンのことである。

async function fetchData(): Promise<Data[]> {
  const response = await fetch("https://...");
  return response.json();
}

export default async function Home() {
  const data = await fetchData();
}

Asyncコンポーネントを使ったパターン
- Asyncコンポーネントが使えるのはNext.jsのapp router以降
メリット
- 取得自体をサーバーサイドコンポーネントで行うので、データ取得が早い
- 記述がシンプル
デメリット
- インタラクティブな操作が必要なメソッド同時使用できない（"use client"で使えない）

おわりに

今回は簡単に実際のNext.jsアプリケーションで使用するfetchのパターンをまとめました。書き方が色々あって苦手意識がありましたが、一連の記事でまとめた内容を踏まえると理解しやすくなったと思います。