JSS Next.jsアプリにおけるプリレンダリング手法とデータ取得戦略
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.jsアプリでは、プリレンダリング手法とデータ取得の間に強い相関関係があります。
JSS Next.jsサンプルアプリケーションに基づいて作成されたJSSアプリケーションは、Next.jsアプリケーションがサポートするすべてのプリレンダリングフォームをサポートし、通常のNext.jsアプリと同様に、各プリレンダリングフォームごとに異なるデータ取得戦略を使用します。
静的(サイト)生成(SSG/SG)またはサーバー側レンダリング
JSS Next.jsアプリを作成する際、アプリケーションはデフォルトのオプションで初期化されます。デフォルトのプリレンダリング方法は静的サイト生成(SSG)ですが、--prerenderパラメータに値SSRを指定することでサーバー側レンダリング(SSR)を選択できます。
選択したプリレンダリングフォームがデータ取得戦略を決定します。JSS Next.jsアプリのスキャフォールディングを行う際、オプションのキャッチオールルート /src/pages/...path.tsxのデータ取得機能は、アプリ作成時に選択したプリレンダリング方法またはデフォルトの方法であるSSGに合わせて調整されます。
JSS Next.jsのサンプルアプリケーションには、両方のデータ取得戦略の例が含まれています。
デフォルトのオプションでJSS Next.jsアプリを作成するか、--prerender SSGを指定する場合、アプリ作成スクリプトはファイルをsrc/pages/..path.tsxにコピーし、GetStaticPathsとGetStaticPropsの関数を実装します。 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は、ページをレンダリングするために必要なすべてのデータを取得するメソッドcreate(context: GetServerSidePropsContext | GetStaticPropsContext) (ページprops)を公開します。 context。
このメソッドは、以下の構造を持つ型SitecorePagePropsのオブジェクトを返します。
export type SitecorePageProps = { locale: string; layoutData: LayoutServiceData | null; dictionary: DictionaryPhrases; componentProps: ComponentPropsCollection; notFound: boolean; };
ページデータを準備するために、SitecorePagePropsFactoryはJSSレイアウトAPIとJSS辞書APIを使ってデータを取得し、ページpropsのページに提供します。
以下の表はページデータprops説明しています。
財産
概要
locale
ファクトリーはファイルnext.config.jsのi18nエントリで設定されたコンテキストローカレを取得します。それ以外の場合は、package.jsonファイルで定義されたconfig.languageを使用します。
layoutData
layoutDataプロパティはSitecoreレイアウトサービスからLayoutServiceDataをJSS RestLayoutServiceまたはJSS GraphQLLayoutServiceを用いてSitecore GraphQLエッジスキーマを保存REST API。
SSRコンテキストでは、コンテキストリクエストとコンテキスト応答を送信し、 Sitecoreの追跡と分析の利用を可能にします。
dictionary
dictionaryプロパティは、Sitecore辞書サービスREST API(RestDictionaryService)またはSitecore GraphQLエッジスキーマ(GraphQLDictionaryService)のいずれかからのDictionaryPhrasesを含みます。
componentProps
componentPropsプロパティはComponentPropsServiceによってフェッチされたデータを含む。ComponentPropsServiceはこれらの関数を実装するコンポーネントでgetStaticProps/getServerSideProp関数を実行します。componentPropsの構造はフォーマット{ renderingUID: data }のキー-値マップです。
notFound
レイアウトサービスがページルートの 404 ステータスを返すと、notFound の値を trueに設定し、正しい 404 ステータスのカスタムNotFoundページがトリガーされます。
Next.js編集モードでページをリクエストする際のプレビューコンテキスト
Sitecoreエディタで作業中、JSS Next.jsアプリケーションはプレビューモードに入り、SitecorePagePropsFactoryは編集リクエストに伴うlayoutData、dictionary、language editingDataServiceを取得します。
インクリメンタル静的再生(ISR)
静的にJSS Next.jsページを生成する際、アプリケーションを本番用に構築した後、インクリメンタル静的再生を使って静的ページを更新できます。ISRを使用するには、そのページのGetStaticProps実装でrevalidateプロパティを定義します。
ハイブリッドレンダリング
JSS Next.jsアプリケーションで新しいページを作成でき、動的ルートも利用できます。例えば、ファイルsrc/pages/articles/index.tsxに記事の索引を表示するページや、ファイルsrc/pages/articles/id.tsxに単一の記事を表示するページを追加できます。
静的に生成されるアプリでは、動的なコンテンツを持つページはサーバーサイドレンダリングの方が有利です。なぜなら、そうしたページは公開され、検索エンジンにインデックスされ、Sitecoreエディターで編集可能になることが多いからです。さらに、静的生成を使うとかなりの数の記事が存在し、長いビルドプロセスが発生します。
!ヒント 動的ルートに合わせてビルドタイムの静的パスをカスタマイズできます。
JSS Next.jsアプリケーションにおけるプリレンダリングとデータ取得は双方向の関係にあります。サーバーサイドで新しいページをレンダリングするには、ページの初期データを取得するためのGetServerSideProps関数を実装し、ページ内で定義または使用されているコードがSSRと互換性があることを確認するだけです。他のすべてのページは、インクリメンタル静的再生を含むSSGのデータ取得戦略を引き続き使用できます。
サーバー側でレンダリングされるページと静的に生成されるページがある場合、Next.jsは静的HTML生成に対応しているなら、静 的HTMLファイルとしてgetStaticPropsを使うルートやページを自動的にレンダリングします 。