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

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

jss create my-first-jss-app nextjs --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。
2. ファイルを/pages/..path.SSR.tsxダウンロードし、..path.tsxにリネームしてください。
3. オプションで削除 //lib/sitemap-fetcher.ts。

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

1. ファイルを移動または削除してください /pages/..path.tsx。
2. フォルダ/pagesに..path.tsxをダウンロードしてください。
3. sitemap-fetcher.tsをダウンロードして/lib。