👻

【Web Library】Nextjs13で覚える便利なライブラリ【#６client fetch use()】

2023/02/28に公開

Next.js

tech

【#６client fetch use()】

YouTube: https://youtu.be/A0ehkoEviis

https://youtu.be/A0ehkoEviis

今回はこちらのドキュメントの注釈にある、
クライアントサイドのデータフェッチについて解説します。

クライアントサイドのデータフェッチでは、
これまで通り「SWR」や「React Query」が推奨されているのですが、
今回は「use」メソッドを使用してフェッチを行います。

前回作成した、「page.tsx」の1行目に「'use client';」を設定して、
こちらをクライアントサイドのコンポーネントに変更します。

「react」から「use」をインポートします。

そして、
フェッチのメソッド（今回はgetUsers）を「use」の引数に設定します。

「async」「await」は削除します。

app/fetch/page.tsx

'use client';
import PlaceHolderUsers from '@/ui/PlaceholderUsers';
import { use } from 'react';

async function getUsers() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

const Page = () => {
  const data = use(getUsers());
  console.log(data);

  return (
    <div>
      <PlaceHolderUsers users={data} />
    </div>
  );
};

export default Page;

【#６client fetch use()】

Discussion