---
title: "JSS Next.jsアプリでプリレンダリング方法を切り替えてください"
slug: "switch-the-pre-rendering-method-in-a-jss-next-js-app"
abstract: "キャッチオールルートのプリレンダリング方法を変更する"
---
# 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コンテナテンプレートを使ってプロジェクトを設定した場合、ソースディレクトリは <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/21/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html#UUID-30fb1438-86f1-1470-90e7-fe7f7de12477_section-id235376531342615 "Using hybrid rendering")データ取得方式をハイブリッドレンダリングに使ったりしたい場合もあります。

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

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

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

1.  ファイル <src>/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.  ファイル <src>/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.  <src>/libでは、[アプリテンプレートリポジトリ](https://github.com/Sitecore/jss/tree/release/20.0.0/packages/create-sitecore-jss/src/templates/nextjs/src/lib)からフォルダsitemap-fetcherをコピーします。
    

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

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してレンダリングします。