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

Version:

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

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

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

JSS Next.jsサンプルアプリケーションに基づいて作成されたJSSアプリケーションは、Next.jsアプリケーションがサポートするすべてのプリレンダリングフォームをサポートしており、通常のNext.jsアプリと同様に、プリレンダリングフォームごとに異なるデータ取得方法を使用します。

静的(サイト)生成またはサーバー側レンダリング

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

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

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

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

--prerender SSRを指定してJSS Next.jsアプリを作成する場合、アプリ作成スクリプトはファイルを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 = {
  site: SiteInfo;
  locale: string;
  layoutData: LayoutServiceData | null;
  dictionary: DictionaryPhrases;
  componentProps: ComponentPropsCollection;
  notFound: boolean;
  redirect?: Redirect;
};

ページデータを準備するために、SitecorePagePropsFactoryはJSSレイアウトAPIとJSSディクショナリAPIを使用してデータをフェッチし、ページデータpropsで使用できるようにします。

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

財産	形容
site	SiteResolverクラスによって解決されたサイト情報を格納します。
locale	ファクトリは、next.config.jsファイルのi18nエントリで設定されたコンテキストロケールを取得します。それ以外の場合は、site.languageプロパティで定義されている既定のサイト言語が使用されます。
layoutData	layoutDataプロパティは、Sitecore Layout Service REST API JSS RestLayoutServiceまたはSitecore GraphQL EdgeスキーマJSS GraphQLLayoutServiceを使用してLayoutServiceDataを格納します。 SSRコンテキストでは、コンテキスト要求とコンテキスト応答を送信して、Sitecoreの追跡と分析を使用できるようにします。
dictionary	dictionaryプロパティには、Sitecore Dictionary Service 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ファイルとして使用するルート/ページを自動的にレンダリングします。

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