Nextjsでデーターfetchする（SSR、ISR、SSG）
SSR(Server-Side-Rendering)
SSRはユーザーがページをリクエストするたびにHTMLドキュメントが生成されます。
ユーザーがリクエストするたびに動的にページを生成して内容を表示することができます（常に最新の状態を維持する必要があるウェブページや分析チャートなど）。
Next 12 バージョンのgetServerSidePropsの役割と同じです。
export const getAllArticle = async (): Promise<Article[]> => {
const res = await fetch(`http://localhost:3001/posts`, { cache: "no-store" }); //SSR
if (!res.ok) {
throw new Error("This is Error");
}
await new Promise((reslove) => setTimeout(reslove, 1500));
const articles = await res.json();
return articles;
};
ISR(Incremental Static Regeneration)
export const getDetailArticle = async (id: string): Promise<Article> => {
const res = await fetch(`http://localhost:3001/posts/${id}`, {
// cache: "no-store",
next: { revalidate: 60 },
}); //ISR
if (res.status === 404) {
notFound();
throw new Error("エラーです。");
}
if (!res.ok) {
throw new Error("This is Error");
}
await new Promise((reslove) => setTimeout(reslove, 1000));
const article = await res.json();
return article;
};
Next13以降からのアップデート
// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });
fetch() Web APIが使用可能になったことで、SSR data fetchingの方法が変更されました。
従来のgetStaticProps、getServerSideProps、getStaticPropsの方法をfetch()オプションで代替できます。
{ cache: 'force-cache' }
fetchのデフォルトオプションであり、getStaticPropsの役割と同じです。
ビルド時に取得したデータが使用され、revalidateするまでデータがキャッシュされる方式です。
{ cache: 'no-store' }
getServerSidePropsの役割と同じです。サーバー側で各リクエストごとに新たにfetchすることになります。
{ next : { revalidate: 10 } }
nextオプションを通じてキャッシュされているデータをrevalidateすることができます。
このようなfetch方式が可能になった理由は、サーバーコンポーネントとクライアントコンポーネントが分離されたためです。
Nextjs12のSSG(Static-Site-Generation)
Next.jsではSSRよりもSSGの方が高い性能を持っているため、SSGの使用を推奨しています。
なぜならSSGはビルド時にHTMLが生成され、リクエストごとにHTMLを再利用します。SSRはリクエストのたびにHTMLを生成するため、応答速度が遅く、サーバーに多くの負担がかかります。
SSGは主にマーケティングページやブログ記事など、静的に生成された情報がリクエストごとに同じ情報で返される場合に使用されます。
getStaticProps
export async function getStaticProps() {
const res = await fetch(`https://.../data`);
const data = await res.json();
return {
props: {
Data: data,
},
};
}
const ProjectsPage = ({ Data }) => {
<ul>
{Data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>;
};
ProjectsPageが呼び出されると、getStaticPropsが先に実行され、axiosを通じた通信で投稿リストを取得し、propsに戻り値を詰めてProjectsPageコンポーネントに渡します。getStaticPropsを使用してビルドすると、事前にサーバーからAPIを呼び出してデータを詰め、そのデータが詰まったHTMLが生成されます。
Discussion