1. JSS Next.jsアプリでのプリレンダリング方法とデータ取得戦略

JSS Next.jsアプリでのプリレンダリング方法の切り替え

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JSS Next.jsアプリを作成するときに、オプションのprerenderパラメーターを使用して、最初のプリレンダリング形式を選択できます。このパラメーターを省略すると、アプリケーションはデフォルトで静的サイト生成 (SSG) 用に最適化されます。例えば：

npx create-sitecore-jss --templates nextjs --appName my-nextjs-app --prerender {SSG|SSR}

JSS Next.jsアプリケーションには、<src>/pages/..path.tsxで定義されているオプションのキャッチオールルートが付属しています。ルートは、静的サイト生成 (SSG) またはサーバーサイドレンダリング (SSR) のいずれかに最適化できます。

ルート ファイルは、SSRのデータを取得する機能またはSSGのデータを取得する機能を持つ --prerenderパラメータに指定した値に基づいて作成されます。

アプリケーションを作成した後、プリレンダリング形式を切り替えたり、ハイブリッドレンダリングに両方のタイプのデータフェッチを使用したりできます。

JSS Next.jsアプリケーションをSSGからSSRに切り替えるには、次のようにします。

  1. ファイル <src>/pages/..path.tsxで、関数getStaticPathsを削除します。

  2. ファイル <src>/pages/..path.tsxで、関数getStaticPropsの名前をgetServerSidePropsに変更し、関数によって返されるオブジェクトからrevalidateプロパティを削除します。

  3. 必要に応じて、/<src>/lib/sitemap-fetcherフォルダを削除します。

JSS Next.jsアプリケーションをSSRからSSGに切り替えるには、次のようにします。

  1. ファイル <src>/pages/..path.tsxで、次のようにgetStaticPaths関数を定義します。

    export const getStaticPaths: GetStaticPaths = async (context) => {
  if (process.env.NODE_ENV !== 'development') {
    // Note: Next.js runs export in production mode
    const paths = await sitemapFetcher.fetch(context);
    return {
      paths,
      fallback: process.env.EXPORT_MODE ? false : 'blocking',
    };
  }
  return {
    paths: [],
    fallback: 'blocking',
  }
;};

  2. ファイル <src>/pages/..path.tsxで、関数の名前をgetServerSidePropsからgetStaticPropsに変更し、関数によって返されるオブジェクトにrevalidateプロパティを追加します。例えば：

    export const getStaticProps: GetStaticProps = async (context) => {
 const props = await sitecorePagePropsFactory.create(context);
  return {
    props,
    revalidate: 5, // In seconds
    notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
  };
};

  3. <src>/libで、アプリ テンプレート リポジトリからフォルダー sitemap-fetcherをコピーします。

この記事を改善するための提案がある場合は、 お知らせください!