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 サンプル アプリケーションには、両方のデータ フェッチ戦略の例が含まれています。
既定のオプションを使用するか、--prerender SSG を指定して JSS Next.js アプリを作成する場合、アプリ作成スクリプトはファイル src/pages/[[..path]].tsx をコピーし、関数 GetStaticPaths および GetStaticProps を実装します。GetStaticPaths の実装は、GraphQL サイトマップ サービス を使用して静的に生成する必要があるパスのリストを生成します。
--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 = {
locale: string;
layoutData: LayoutServiceData | null;
dictionary: DictionaryPhrases;
componentProps: ComponentPropsCollection;
notFound: boolean;
};ページ データを準備するには、SitecorePagePropsFactory は JSS Layout API および JSS Dictionary API を使用して、props ページ内のページで使用できるようにデータをフェッチします。
次の表で、ページ props データを説明します。
|
プロパティ |
説明 |
|---|---|
|
|
ファクトリは、ファイル |
|
|
SSR のコンテキストでは、コンテキスト要求とコンテキスト応答を送信して、Sitecore のトラッキングと分析を使用する機能を提供します。 |
|
|
|
|
|
|
|
|
レイアウト サービスがページ ルートに |
編集モードでページをリクエストしている 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 ファイルに追加することも、1 つの記事を表示するページを src/pages/articles/[id].tsx に追加することもできます。
静的に生成されたアプリでは、動的コンテンツを含むページをサーバー側でレンダリングすることでメリットが得られます。これは一般的な目的として、そのようなページへの公共アクセスを可能にし、検索エンジンによりインデックスを作成し、Sitecore エディターで編集可能にすることが考えられるためです。さらに、かなりの数の記事がある場合は、静的生成を使用するとビルド プロセスが長くなる可能性もあるためです。
ビルド時に動的ルートのための静的パスをカスタマイズすることもできます。
JSS Next.js アプリケーションでのプリレンダリングとデータ フェッチは、双方向の関係にあります。サーバー側で新しいページをレンダリングするには、GetServerSideProps 関数を実行してページの初期データを取得し、ページで定義または使用されているコードに SSR との互換性があることを確認するだけです。その他すべてのデータは引き続き、増分静的再生を含む SSG データ フェッチ戦略を使用できます。
サーバー側レンダリングで生成されるページと静的に生成されるページが混在するハイブリッド アプリケーションの場合、静的 HTML 生成との互換性がある場合は、Next.js は静的 HTML ファイルとして getStaticProps を使用するルート/ページを自動的にレンダリングします。