--- title: "JSS Next.jsアプリにおけるプリレンダリング手法とデータ取得戦略" slug: "prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps" abstract: "JSS Next.jsアプリにおけるプリレンダリングとデータ取得の関係" --- # JSS Next.jsアプリにおけるプリレンダリング手法とデータ取得戦略 Next.jsアプリでは、[プリレンダリング手法とデータ取得の間に強い相関](https://nextjs.org/docs/basic-features/data-fetching)関係があります。 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](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/preparing-the-list-of-pages-for-static-generation-or-export-in-jss-next-js-apps.html "Preparing the list of pages for static generation or export in JSS Next.js apps")を使って静的に生成しなければならないパスのリストを生成します。 \--prerender SSRを指定するJSS Next.jsアプリを作成する際、アプリ作成スクリプトはファイルをsrc/pages/..path.SSR.tsxコピーし、src/pages/..path.tsxに名前を変更します。このファイルは関数GetServerSidePropsを実装します。 GetStaticPropsとGetServerSidePropsの実装は、ファイルsrc/lib/page-props-factory.tsのSitecorePagePropsFactory定義を活用しています。 > !ヒントアプリ作成後に [別の方法に切り替え](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html "Switch the pre-rendering method in a JSS Next.js app") ることができます。 ## ページデータの準備 クラス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](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-layout-api.html "JSS Layout API")と[JSS辞書API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API")を使ってデータを取得し、ページpropsのページに提供します。 以下の表はページデータprops説明しています。 財産 概要 locale ファクトリーはファイルnext.config.jsのi18nエントリで設定されたコンテキストローカレを取得します。それ以外の場合は、package.jsonファイルで定義されたconfig.languageを使用します。 layoutData layoutDataプロパティは[Sitecoreレイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html)からLayoutServiceDataをJSS RestLayoutServiceまたはJSS GraphQLLayoutServiceを用いて[Sitecore GraphQLエッジスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-experience-edge-schema.html)を保存REST API。 SSRコンテキストでは、コンテキストリクエストとコンテキスト応答を送信し、 [Sitecoreの追跡と分析の利用](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/tracking-and-analytics-integration-in-jss-next-js-apps.html)を可能にします。 dictionary dictionaryプロパティは、[Sitecore辞書サービスREST API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/dictionary-service.html)(RestDictionaryService)または[Sitecore GraphQLエッジスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-experience-edge-schema.html)(GraphQLDictionaryService)のいずれかからのDictionaryPhrasesを含みます。 componentProps componentPropsプロパティは[ComponentPropsService](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html)によってフェッチされたデータを含む。ComponentPropsServiceはこれらの関数を実装するコンポーネントでgetStaticProps/getServerSideProp関数を実行します。componentPropsの構造はフォーマット{ renderingUID: data }のキー-値マップです。 notFound レイアウトサービスがページルートの 404 ステータスを返すと、notFound の値を trueに設定し、正しい 404 ステータスのカスタムNotFoundページがトリガーされます。 ### Next.js編集モードでページをリクエストする際のプレビューコンテキスト [Sitecoreエディタで作業](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/architecture-and-apis-for-integrating-jss-next-js-apps-with-sitecore-editors.html "Architecture and APIs for integrating JSS Next.js apps with Sitecore editors")中、JSS Next.jsアプリケーションは[プレビューモード](https://nextjs.org/docs/advanced-features/preview-mode)に入り、SitecorePagePropsFactoryは編集リクエストに伴うlayoutData、dictionary、language editingDataServiceを取得します。 ## インクリメンタル静的再生(ISR) 静的にJSS Next.jsページを生成する際、アプリケーションを本番用に構築した後、[インクリメンタル静的再生](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration)を使って静的ページを更新できます。ISRを使用するには、そのページのGetStaticProps実装でrevalidateプロパティを定義します。 ## ハイブリッドレンダリング JSS Next.jsアプリケーションで新しいページを作成でき、動的ルートも利用できます。例えば、ファイルsrc/pages/articles/index.tsxに記事の索引を表示するページや、ファイルsrc/pages/articles/id.tsxに単一の記事を表示するページを追加できます。 静的に生成されるアプリでは、動的なコンテンツを持つページはサーバーサイドレンダリングの方が有利です。なぜなら、そうしたページは公開され、検索エンジンにインデックスされ、Sitecoreエディターで編集可能になることが多いからです。さらに、静的生成を使うとかなりの数の記事が存在し、長いビルドプロセスが発生します。 > !ヒント [動的ルートに合わせてビルドタイムの静的パスをカスタマイズ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--customizing-build-time-static-paths-in-jss-next-js-apps.html "Walkthrough: Customizing build-time static paths in JSS Next.js apps")できます。 JSS Next.jsアプリケーションにおけるプリレンダリングとデータ取得は双方向の関係にあります。サーバーサイドで新しいページをレンダリングするには、ページの初期データを取得するためのGetServerSideProps関数を実装し、ページ内で定義または使用されているコードが[SSRと互換性](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/best-practices-for-ssr-compatible-jss-apps.html "Best practices for SSR compatible JSS apps")があることを確認するだけです。他のすべてのページは、インクリメンタル静的再生を含むSSGのデータ取得戦略を引き続き使用できます。 サーバー側でレンダリングされるページと静的に生成されるページがある場合、Next.jsは静的HTML生成に対応しているなら、静 [的HTMLファイルとしてgetStaticPropsを使うルートやページを自動的にレンダリングします](https://nextjs.org/docs/advanced-features/automatic-static-optimization) 。