---
title: "JSS Next.jsアプリでプリレンダリング方法を切り替えてください"
slug: "switch-the-pre-rendering-method-in-a-jss-next-js-app"
abstract: "キャッチオールルートのプリレンダリング方法を変更する"
---
# JSS Next.jsアプリでプリレンダリング方法を切り替えてください

[オプションのprerenderパラメータ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-ba8bae12-5938-63d2-1ae1-451aec88abe5_UUID-63ee54c7-6c40-bc5a-0db9-0be674e71aa0 "jss create")を使ってJSS Next.jsアプリを作成する際に、初期のプリレンダリングフォームを選択できます。パラメータを省略すると、アプリケーションはデフォルトで静的サイト生成(SSG)に最適化されています。例えば:

jss create my-first-jss-app nextjs --prerender {SSG|SSR}

> !ヒントNext.js JSSアプリケーションのソースパスは、JSSプロジェクトの設定方法によって異なります。
> 
> 以下のパスはプロジェクトディレクトリに関連しています:
> 
> -   Sitecoreコンテナテンプレートを使ってプロジェクトを設定した場合、ソースディレクトリは <project-folder>/src/rendering/srcにあります。
>     
> -   JSS CLIを使ってJSS Next.jsアプリを作成した場合、ソースディレクトリは <app-name>/srcにあります。
>     
> 
> srcフォルダーへのパスを参照するには<src>を使用します。<src>を実際のパスに置き換えてください。

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

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

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

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

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

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

アプリケーションを作成した後、プリレンダリングフォームを切り替えたり、[両方の](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html#UUID-ee131a96-c940-9654-404f-6904e40ed04d_section-idm1903537659976910 "Using hybrid rendering")データ取得方式をハイブリッドレンダリングに使ったりしたい場合もあります。

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

1.  移動するか削除 <src>/pages/..path.tsx。
2.  ファイルを[<src>/pages/..path.SSR.tsx](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/pages/%5B%5B...path%5D%5D.SSR.tsx)ダウンロードし、..path.tsxにリネームしてください。
3.  オプションで削除 /<src>/lib/sitemap-fetcher.ts。

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

1.  ファイルを移動または削除してください <src>/pages/..path.tsx。
2.  フォルダ[<src>/pagesに..path.tsx](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/pages/%5B%5B...path%5D%5D.tsx)をダウンロードしてください。
3.  [sitemap-fetcher.ts](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/lib/sitemap-fetcher.ts)をダウンロードして<src>/lib。

## ハイブリッドレンダリングの利用

Next.jsでは、一部のルートにはSSGを使い、他のルートにはSSRを使うハイブリッドレンダリングの設定が可能です。ハイブリッドレンダリングには、あなたの要件に応じて2つの一般的なアプローチがあります。

-   *ほとんどのページが静的である場合は* 、キャッチオールルートでSSGを使用し、選択されたページには以下の方法でSSRルートを追加します。
    -   SSGでキャッチオールルート/<src>/pages/...path.tsxをgetStaticPaths、またはrevalidateでgetStaticPropsしてレンダリングします。
    -   SSRで特定のルートを getServerSidePropsでレンダリングします。
-   *ほとんどのページが動的であるべきなら* 、キャッチオールルートでSSRを使用し、選択されたページには以下の方法でSSGルートを追加してください。
    -   SSRでキャッチオールルートを /<src>/pages/...path.tsx レンダリングします。 getServerSideProps。
    -   SSGで特定のルートをgetStaticPathsまたはrevalidateでgetStaticPropsしてレンダリングします。