microCMSとapp routerでのデータ取得
投稿日: 2023/07/05
更新日: 2023/07/05
今回、ホームページをmicroCMSとapp routerで作成するにあたって、データ取得がapp router以前とは異なっていましたので、軽く紹介したいと思います。
基本的なデータ取得方法
まずは、基本的なデータ取得方法になります。
const data = await client.get({
endpoint: 'hello',
});Pagesディレクトリーでのデータ取得方法
次に、app router以前のPagesディレクトリーでのデータ取得方法になります。
以下のようにページ単位でfetchをしなくてはなりません。
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { client } from '../libs/client';
export default function Home({ data }) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>{data.text}</h1>
<p className={styles.description}>
Get started by editing <code className={styles.code}>pages/index.js</code>
</p>
</main>
</div>
);
}
export const getStaticProps = async () => {
const data = await client.get({
endpoint: 'hello',
});
return {
props: {
data,
},
revalidate: 10,
};
};app routerでのデータ取得方法
次にapp routerでのfetch方法になります。
client.getListの引数にcustomRequestInitというプロパティーが存在するので、その中のcacheを"no-store"か"force-cache"するのかで静的生成か動的生成かを識別できます。
※ISRは今の所できませんでした。
追加したい関数があれば、外に出してHomeの中で呼び出す形になります。
async function getContents() {
const response = await client.getList({
customRequestInit: {
cache: "no-store", // キャッシュを利用せずに常に新しいデータを取得する
},
endpoint: "endpoint",
});
return response.contents;
}
export default async function Home() {
const contents = await getContents();
return (
<ul>
{contents.map((item) => {
return <li key={item.id}>{item.title}</li>;
})}
</ul>
);
}まとめ
microCMSとapp routerでは関数単位でキャッシュの取り扱いをできる点が良いかなと思いました。
こちらの記事に記載のようにfetch関数を使用しない独自のAPI関数を用いる場合、キャッシュのコントロールができません。
https://zenn.dev/sumiren/articles/664c86a28ec573
なので、今後microCMSでもISRができるようになることを望みましょう。