レンダリング方法を決定するデータ呼び出し方法

データが必要なページ上で構築するときにHTMLを静的に生成する場合は、getServer SidePropsメソッドを使用します.サーバリクエスト(ページアクセス)のたびにHTMLを動的に生成する場合は、getStaticPropsメソッドを使用します.

静的作成

バージョンでは、完全なページのHTMLが生成され、サーバは物理的にすべてのHTMLファイルを持っています.

ページが要求されると、サーバ上のページのHTMLに応答する.

Next.これはjsが推奨するレンダリング方式で、1回の応答後、CDN(Content Delivery Network)は記憶(キャッシュ、キャッシュ)によってファイルに応答するため、画面を描く速度が非常に速く、不要なサーバ要求を減らすことができます.

getStaticProps

getStaticPropsは、構築時にapiを呼び出し、HTMLを完了するためにデータを受信する静的生成方法です.

export const getStaticProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
  );
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 20,
  };
};

export const getStaticProps = async (context) => {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/photos/${id}`);
  const photo = await res.json();
  return {
    props: {
      photo,
    },
  };
};

上はfake apiを利用してgetStaticPropsを使用しています.既に構築時にHTMLが作成されているため、サーバ上のデータが変化しても変更内容は有効になりません.ただし、Revalidateを使用して新しいデータを一定時間ごとに受信できます.
nextが推奨する方法.
nextはページフォルダ内のフォルダ名を用いて自動的にルーティングする利点があり,id値を用いて詳細アドレスを作成するなどの動作時にgetStaticPathsが必要である.

getStaticPaths

export const getStaticPaths = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/photos?_start=0&_end=10`
  );
  const photos = await res.json();
  const ids = photos.map((photo) => photo.id);
  const paths = ids.map((id) => {
    return {
      params: { id: id.toString() },
    };
  });

  return {
    paths: paths,
    fallback: false,
  };
};

前述したようにparamsにpath値を入れればよい.

動的作成

ページのリクエストがある場合、サーバ側はapiを呼び出してデータに応答し、サーバ側はHTMLを完了してクライアントに転送します.

欠点は、

リクエストが発行されるたびに、サーバ側がHTMLを作成する時間がかかるため、HTMLに応答する時間が長くなる可能性があることです.

サーバにデータを要求するたびに、サーバ上の変更はすぐに有効になります.

getServerSideProps

export const getServerSideProps = async () => {
  const res = await fetch(    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`);
   const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
};

上はfake apiを利用してgetServerSidePropsを使用しています.サーバデータが変化すると、データが要求されるたびに変更されたデータがバインドされます.しかし、HTMLを再作成するたびに時間がかかる場合があります.