フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

Next.js で クライアントサイドfetch を サーバーサイドへ移す ( pages router / SSR )

●クライアントサイド

import useSWR from "swr";
import axios from "axios";

export default function GoogleBooks() {
  console.log("😀");

  const fetcher = (url: string) =>
    axios(url).then((res) => {
      return res.data;
    });

  const { data, error } = useSWR(
    `https://www.googleapis.com/books/v1/volumes?q=typescript`,
    fetcher
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>now loading...</div>;

  // この console.log は ブラウザのコンソールに表示される。
  console.log("===== data =====");
  console.log(data);

  return (
    <div>
      <ul>
        {data.items.map((item: any, i: number) => (
          <li key={i}>{item.volumeInfo.title}</li>
        ))}
      </ul>
    </div>
  );
}

●サーバーサイド

getServerSideProps() を使用するとサーバーサイド処理になります。

// Server Side Rendering
export async function getServerSideProps() {
  const response = await fetch(
    encodeURI("https://www.googleapis.com/books/v1/volumes?q=typescript")
  );
  return {
    props: {
      bookList: await response.json(),
    },
  };
}

export default function GoogleBooksSSR(props: any) {
  console.log("😎");

  // この console.log は サーバー側のターミナルに表示される。
  console.log("===== props =====");
  console.log(props);

  return (
    <div>
      <ul>
        {props.bookList.items.map((item: any, i: number) => (
          <li key={i}>{item.volumeInfo.title}</li>
        ))}
      </ul>
    </div>
  );
}

なお useSWR もサーバーサイドで利用できるようです
【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい - パンダのプログラミングブログ

No.2155
11/06 10:16

edit