JSS Next.jsアプリでプリレンダリング方法を切り替えてください

JSS Next.jsアプリを作成する際に、オプションのprerenderパラメータを使って初期のプリレンダリングフォームを選択できます。パラメータを省略すると、アプリケーションはデフォルトで静的サイト生成(SSG)に最適化されています。例えば:

npx create-sitecore-jss --templates nextjs --appName my-nextjs-app --prerender {SSG|SSR}

!ヒントNext.js JSSアプリケーションのソースパスは、JSSプロジェクトの設定方法によって異なります。

以下のパスはプロジェクトディレクトリに関連しています:

• Sitecoreコンテナテンプレートを使ってプロジェクトを設定した場合、ソースディレクトリは /src/rendering/srcにあります。

• JSS CLIを使ってJSS Next.jsアプリを作成した場合、ソースディレクトリは /srcにあります。

srcフォルダーへのパスを参照するにはを使用します。を実際のパスに置き換えてください。

JSS Next.jsアプリケーションには、/pages/..path.tsxで定義されたオプションのキャッチオールルートが付属しています。このルートは、静的サイト生成(SSG)またはサーバー側レンダリング(SSR)のいずれかに最適化可能です。

SSGは、速度、パフォーマンス、低実行コストが重要な場合に理想的です。SSGは以下のページに使用してください:

• ほとんどのサイト訪問者に共通しています。
• revalidateを用いて定期的にキャッシュ・再生成できます。
• マーケティングページ、ランディングページ、ドキュメントページなどの迅速な配信やCDNキャッシュの恩恵を受けられます。

SSRは、高度にパーソナライズされ、頻繁に変更される、または常に最新でなければならないコンテンツに最適です。SSRは以下のページにSSRを使用してください:

• クッキーやヘッダーに基づくパーソナライズなど、ユーザー固有のまたはリクエスト固有の出力を義務付けてください。
• 常に最新のデータを反映し、再検証を待つことはできません。
• リクエストごとのセキュリティチェックや非常に動的なバックエンド応答に依存します。

ルートファイルは、SSRやSSGのデータ取得機能を備えた、--prerenderパラメータの値に基づいて作成されます。

アプリケーションを作成した後、プリレンダリングフォームを切り替えたり、両方のデータ取得方式をハイブリッドレンダリングに使ったりしたい場合もあります。

JSS Next.jsアプリケーションをSSGからSSRに切り替えるには:

1. ファイル /pages/..path.tsxで、関数 getStaticPathsを削除してください。
2. ファイル /pages/..path.tsxで関数名を getStaticProps getServerSideProps に変更し、関数が返すオブジェクトから revalidate プロパティを削除します。
3. オプションとして、フォルダを削除 //lib/sitemap-fetcher。

JSS Next.jsアプリケーションをSSRからSSGに切り替えるには:

1. ファイル /pages/..path.tsxでは、getStaticPaths関数を次のように定義します。

   export const getStaticPaths: GetStaticPaths = async (context) => { if (process.env.NODE_ENV !== 'development') { // Note: Next.js runs export in production mode const paths = await sitemapFetcher.fetch(context); return { paths, fallback: process.env.EXPORT_MODE ? false : 'blocking', }; } return { paths: , fallback: 'blocking', } ;};

2. ファイル /pages/..path.tsxで関数名をgetServerSideProps getStaticPropsに変更し、関数が返すオブジェクトにrevalidateプロパティを追加します。例えば:

   export const getStaticProps: GetStaticProps = async (context) => { const props = await sitecorePagePropsFactory.create(context); return { props, revalidate: 5, // In seconds notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true }; };

3. /libでは、アプリテンプレートリポジトリからフォルダsitemap-fetcherをコピーします。