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

Version:

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

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

Next.jsアプリでは、プリレンダリング方法とデータ取得の間には強い相関関係があります。

JSS Next.jsサンプル・アプリケーションに基づいて作成されたJSSアプリケーションは、Next.jsアプリケーションがサポートするすべてのプリレンダリング・フォームをサポートし、通常のNext.js・アプリケーションと同様に、プリレンダリング・フォームごとに異なるデータ・フェッチ・ストラテジーを使用します。

静的(サイト)生成(SSG/SG)またはサーバーサイドレンダリング

JSS Next.jsアプリを作成するとき、アプリケーションはいくつかのデフォルトオプションで初期化されます。デフォルトのプリレンダリング方法は静的サイト生成(SSG)ですが、--prerenderパラメータに値SSRを指定することで、サーバーサイドレンダリング(SSR)を選択できます。

選択したプリレンダリング形式によって、データ取得方法が決まります。JSS Next.jsアプリをスキャフォールディングする場合、オプションのcatch-allルート /src/pages/...path.tsxのデータ取得機能は、アプリの作成時に選択したプリレンダリング方法またはデフォルトの方法 (SSG) に合わせて調整されます。

JSS Next.jsサンプル・アプリケーションには、両方のデータ・フェッチ・ストラテジーの例が含まれています。

デフォルトのオプションを使用してJSS Next.jsアプリを作成するか、--prerender SSGを指定すると、アプリ作成スクリプトはGetStaticPaths関数と関数GetStaticPropsを実装するファイルsrc/pages/..path.tsxをコピーします。GetStaticPathsの実装では、GraphQL Sitemap Serviceを使用して静的に生成する必要があるパスのリストが生成されます。

JSS Next.jsアプリケーションを作成する場合、--prerender SSRを指定すると、アプリケーション作成スクリプトはファイルsrc/pages/..path.SSR.tsxをコピーし、名前をsrc/pages/..path.tsxに変更します。このファイルは、関数GetServerSidePropsを実装します。

GetStaticPropsとGetServerSidePropsの実装では、ファイルsrc/lib/page-props-factory.tsのSitecorePagePropsFactory定義が活用されます。

先端

アプリの作成後に別の方法に切り替えることができます。

ページ・データの準備

このクラスSitecorePagePropsFactoryは、contextに応じて、ページ (ページprops) のレンダリングに必要なすべてのデータを取得するメソッドcreate(context: GetServerSidePropsContext | GetStaticPropsContext) を公開します。

このメソッドは、次の構造体を持つSitecorePageProps型のオブジェクトを返します。

export type SitecorePageProps = {
  locale: string;
  layoutData: LayoutServiceData | null;
  dictionary: DictionaryPhrases;
  componentProps: ComponentPropsCollection;
  notFound: boolean;
};

ページデータを準備するために、SitecorePagePropsFactoryはJSS Layout APIとJSS Dictionary APIを使用してデータをフェッチし、ページprops内のページで使用できるようにします。

次の表では、ページpropsのデータについて説明します。

財産	形容
locale	ファクトリは、ファイルのi18nエントリで設定されたコンテキストロケールnext.config.jsを取得します。それ以外の場合は、package.jsonファイルで定義されているconfig.languageが使用されます。
layoutData	layoutDataプロパティは、JSS RestLayoutServiceを使用してSitecoreレイアウトサービスREST APIから、またはJSS GraphQLLayoutServiceを使用してSitecore GraphQL EdgeスキーマからLayoutServiceDataを格納します。 SSRコンテキストでは、コンテキスト要求とコンテキスト応答を送信して、Sitecoreの追跡と分析を使用できるようにします。
dictionary	dictionaryプロパティには、SitecoreディクショナリサービスREST API (RestDictionaryService) またはSitecore GraphQL Edgeスキーマ (GraphQLDictionaryService) からのDictionaryPhrasesが含まれています。
componentProps	componentPropsプロパティには、ComponentPropsServiceによってフェッチされたデータが含まれています。ComponentPropsServiceは、これらの機能を実装するコンポーネントでgetStaticProps/getServerSideProp機能を実行します。componentPropsの構造は、{ renderingUID: data }の形式のキーと値のマップです。
notFound	レイアウトサービスがページルートの404ステータスを返す場合、notFoundの値をtrueに設定し、正しい404ステータスでカスタムNotFoundページをトリガーします。

Next.js編集モードでページをリクエストしている間のコンテキストのプレビュー

Sitecoreエディターで作業しているときに、JSS Next.jsアプリケーションはプレビューモードになり、SitecorePagePropsFactoryはeditingDataServiceを使用して、編集リクエストで送信された、layoutData、dictionary、languageデータを取得します。

インクリメンタル静的再生成 (ISR)

JSS Next.jsページを静的に生成する場合、アプリケーションを実動用にビルドした後で、増分静的再生成を使用して静的ページを更新できます。ISRを使用するには、そのページのGetStaticProps実装でrevalidateプロパティを定義します。

ハイブリッドレンダリング

JSS Next.jsアプリケーションで新しいページを作成したり、動的ルートを使用したりすることもできます。たとえば、ファイルsrc/pages/articles/index.tsx <> に記事のインデックスを表示するページと、ファイルsrc/pages/articles/id.tsxに1つの記事を表示するページを追加できます。

静的に生成されるアプリでは、動的コンテンツを含むページは、公開され、検索エンジンによってインデックスされ、Sitecoreエディターで編集可能にする必要があるため、サーバー側でレンダリングされるメリットがあります。さらに、記事の数がかなりある場合があり、静的生成を使用するとビルドプロセスが長くなる可能性があります。

先端

動的ルートのビルド時の静的パスをカスタマイズできます。

JSS Next.jsアプリケーションでのプリレンダリングとデータフェッチには、双方向の関係があります。新しいページをサーバー側でレンダリングするには、GetServerSideProps関数を実装してページの初期データを取得し、ページで定義または使用されるコードがSSRと互換性があることを確認するだけです。他のすべてのページでは、増分静的再生成を含むSSGデータ取得戦略を引き続き使用できます。

一部のページがサーバー側でレンダリングされ、他のページが静的に生成されるハイブリッドアプリケーションでは、Next.jsは、静的HTML生成と互換性がある場合、getStaticPropsを使用するルート/ページを静的HTMLファイルとして自動的にレンダリングします。

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