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だと伝えたい - パンダのプログラミングブログ