チュートリアル: MVCアプリケーションの静的な生成

Version: 22.x

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore Headless ServicesやSitecore JavaScript Rendering SDKs (JSS)など、Sitecoreが提供するヘッドレスレンダリングソリューションを使用すると、JSS Next.jsアプリを使用してMVCアプリケーションを静的に生成できます。

JSSを使用してMVCアプリケーションを静的に生成するプロセスを開始する前に、次の前提条件を満たす必要があります。

Sitecore XM/XPバージョン10.2+ およびSitecoreヘッドレスサービスモジュールバージョン19+ のSitecoreインスタンスにアクセスできます。
Next.jsのSitecore JavaScript Rendering SDKs (JSS)、Next.js、およびSitecore JavaScriptレンダリングSDK (JSS) については、ある程度ご理解いただいています。
JSS CLIバージョン19+ をインストールする必要があります。
APIキーを作成する必要があります。

大事な

これらの手順に従うときは、変換に段階的なアプローチを採用している場合、既存のMVCページと静的MVCページの両方をサポートする必要があり、これには複数のレイアウト項目またはカスタマイズが必要になる可能性があることに注意してください。

このチュートリアルでは、次の方法について説明します。

MVCアプリケーションを静的HTML生成に適合させます。
MVCレイアウトのプレースホルダーをレイアウトサービスの応答に含めます。
Sitecoreレイアウトサービスを設定して、MVCレンダリングのHTMLを出力します。
MVCアプリケーションをレンダリングするためのJSS Next.jsアプリケーションを準備します。
Next.jsアプリケーションを適応させて、既存のMVCアプリからレイアウトとアセットを提供する
Next.jsアプリケーションを起動します。

大事な

この変換プロセスには、JSSアプリケーションの選択と、SitecoreおよびMVCアプリケーションの既存の設定に応じて、いくつかの制限があります。

静的HTML生成のためのMVCアプリケーションの適応

MVCアプリケーションでは、JSSアプリケーションを使用した静的HTML生成と互換性を持たせるために、いくつかの変更が必要になる場合があります。

MVCアプリケーションを適応させるには:

JSSアプリで編集と静的生成のサポートを有効にするには、サイトのルートが /sitecore/templates/Foundation/JavaScript Services/App templateを継承していることを確認します。
編集サポートを有効にするには、ページのレイアウトでテンプレート /sitecore/templates/Foundation/JavaScript Services/JSS Layoutが使用または継承されていることを確認してください。 Path値は使用せず、有効なファイルパスのみである必要があります。デフォルトではJSSは /Views/JssApp.cshtml.
JSS Dictionary APIには、<app>構成のdictionaryDomain属性など、特定のテンプレートと構成が必要です。互換性のためにMVCソリューションを調整する必要がある場合があります。

レイアウトサービスの応答にMVCレイアウトのプレースホルダーを含める

JSSアプリケーションでMVCレイアウトをレンダリングするには、レイアウトで使用可能なプレースホルダーをレイアウトサービスの応答に含める必要があります。

先端

このチュートリアルでは、RESTレイアウトサービスエンドポイントの例を使用しますが、この手順はGraphQLとExperience Edgeでも同様に機能し、レイアウトクエリを使用してデータにアクセスできます。

Layout Serviceの応答を調べるには、<cm_server>/sitecore/api/layout/render?item=/&sc_apikey=<api_key>のエンドポイントにアクセスします。構成されたサイト開始アイテムJSON / の出力を確認できます。

メモ

マルチサイトソリューションの場合は、sc_siteクエリパラメーターを追加します。 sc_mode=normalクエリパラメーターを使用して、編集モードのレイアウトデータを無効にします。

プレースホルダー情報がsitecore > route > placeholdersの下のJSONデータ構造にない場合は、レイアウトごとにLayout Service Placeholdersフィールドを設定する必要があります。このフィールドは、レイアウトサービスの応答データに含めるプレースホルダ情報を決定します。

レイアウトのplaceholdersフィールドに入力するには:

コンテンツツリーのsitecore/layouts/Layoutsで、選択したレイアウトのrootプレースホルダーをLayout Service Placeholdersフィールドに追加します。

手記

Placeholder Settingsアイテムが存在しない場合は、作成します。
以前にアクセスしたレイアウトサービスエンドポイントを更新します。 Sitecore/route /placeholdersのデータにあるプレースホルダー情報が入力されました。データには、ページのレンダリングに必要なすべてのプレースホルダーとコンポーネントが含まれます。

MVCレンダリングのHTMLを出力するようにSitecoreレイアウトサービスを設定する

レイアウトのLayout Service Placeholdersフィールドの設定に従って、JSON形式のプレースホルダー情報を取得します。

すべてのコンポーネントをJavaScriptに変換する前にMVCアプリケーションをHTMLに静的にレンダリングするには、JSSアプリケーションに到達する前にコンポーネント情報をHTMLに変換する必要があります。

MVCレンダリングのHTMLを出力するようにレイアウトサービスを設定するには:

sitecore/layout/Renderingsに移動しHTML次のいずれかの方法を使用してレンダリングの出力を有効にします。
- 関連するレンダリングで、HTML出力を手動で有効にするには、Render as HTMLチェックボックスをオンにします。このオプションは、ネストされたすべてのレンダリングに対しても有効にする必要があります。
  
  先端
  
  この設定が必要なコンポーネントを特定するには、componentNameプロパティのJSON出力を確認します。 componentNameはレンダリングアイテム名と一致します。
- Sitecore PowerShell Extensionsがインストールされている場合は、Sitecore PowerShell ISEツールで次のスクリプトを実行して、allレンダリングのRender as HTMLチェックボックスをオンにします。
  
  手記
  
  スクリプトを実行するには、Sitecore PowerShell Extensionsがインストールされている必要があります。
  RequestResponse
  Get-ChildItem "/sitecore/layout/Renderings" -Recurse | Where-Object { $_.TemplateName -eq "View rendering" -or $_.TemplateName -eq "Controller rendering" } | ForEach-Object { $val = $_.Fields["Render as HTML"].Value if ($val -eq "1") { return } Write-Host "Setting '$($_.Name)'" $_.Editing.BeginEdit() $_.Fields["Render as HTML"].Value = 1 $_.Editing.EndEdit() }
- グローバル設定を使用してJSONレンダリングを無効にし、すべてのレンダリングでHTMLシリアル化に切り替えます。
  RequestResponse
  <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/"> <sitecore> <layoutService>  <serializableRenderingTypes> <viewRendering> <patch:delete /> </viewRendering> <controllerRendering> <patch:delete /> </controllerRendering> </serializableRenderingTypes> </layoutService> </sitecore> </configuration>
変更を公開します。
レイアウトサービスエンドポイントを更新し、コンポーネントデータ出力がHTMLであることを確認します。

MVCアプリケーションをレンダリングするためのJSS Next.jsアプリケーションの準備

MVCアプリケーションを静的に生成するには、Next.jsのJSSを使用して基本的なJSS Next.jsアプリケーションを作成することをお勧めします。

先端

JSSが提供するサンプルのNext.jsアプリケーションを元にアプリケーションを作成する前に、データの取得にGraphQLサービスとRESTサービスのどちらを使用するか、またMVCアプリケーションをJavaScriptに移行した場合に使用するプリレンダリング方法を検討してください。

Experience Edge for XMとの互換性のために、GraphQLを推奨します。

MVCアプリのHTML出力をレンダリングするためのNext.js JSSアプリケーションを作成するには:

ターミナルで、次のコマンドを実行して、JSSを使用してNext.jsアプリケーションを作成します。
RequestResponse
```
npx create-sitecore-jss nextjs
```
大事な

<app-name>はMVCサイト名と一致する必要がありますが、アプリ名の書式設定の制限に注意する必要があります。たとえば、MyMvcAppは有効なMVCサイト名ですが、JSS初期化子では小文字のみが許可されます。JSSアプリケーションを作成するときは、小文字のアプリ名 (my-mvc-appなど) を指定します。プロセスが終了したら、package.jsonファイルでconfig.appNameプロパティをMyMvcAppに更新します。
Next.js JSSアプリケーションをSitecoreにConnectします。
Next.jsアプリケーションのルートディレクトリで、Sitecore設定パッチファイルを確認します /sitecore/config/<app-name>.configこの設定は、Sitecoreインスタンスにデプロイする必要があります。

手記

既存のMVCサイトに一致する <site/> 構成が既にあるため、サイト構成属性をマージすることができます。
高度なSitecoreエディターを使用して編集を有効にします。

Next.jsアプリケーションを適応させて、既存のMVCアプリからレイアウトとアセットを提供する

JSS Next.jsアプリでSitecore MVCアプリケーションをレンダリングするには、一致するレイアウトと、スタイルやスクリプトなどのMVCアプリのリソースにアクセスできる必要があります。

Next.jsアプリケーションを適応させるには:

アプリでページのhtml要素やbody要素をカスタマイズする必要がある場合は、src/pagesディレクトリでカスタムDocument componentを定義します。
src/Layout.tsxファイルを適合させ、基本マークアップやルートプレースホルダーなど、アプリケーションのルートレイアウトをMVCベースのレイアウトに合わせて定義します。
src/pages/_app.tsxファイルやsrc/Layout.tsxファイルを変更して、フロントエンドアセットを含めます。

先端

Next.jsでのサポートが組み込まれているCSSソリューションに移行し、next/scriptコンポーネントを使用して外部スクリプトを読み込むことを検討してください。

手記

生成されたアプリは、BootstrapとカスタムCSSを使用します。詳細については、ディレクトリsrc/assets/を参照してください。
ビルドプロセス中に手つかずのままにするファイルを、Next.jsアプリケーションのルートディレクトリにあるpublicディレクトリに配置します。詳細については、静的ファイルの提供に関するNext.jsのドキュメントを参照してください。
DOMContentLoadedイベントまたはドキュメント対応イベントに依存する既存のJavaScriptコードを調整して、イベント委任のようなものを使用するようにします。これは、クライアント側のルート変更によってこれらのイベントが保証されなくなるためです。
Sitecore Content ManagementサーバーまたはContent Deliveryサーバーに送り返す要求の書き換えを構成します。JSSアプリケーションには一般的なリダイレクト (Sitecore、メディア) があらかじめ設定されていますが、MVCソリューションでカスタマイズするすべてのリダイレクトを設定する必要があります。

先端

Next.jsには、特にJamstackアーキテクチャにすぐに変換したくないサイト機能に対して、増分採用を可能にするように書き換えを構成するための堅牢な機能が含まれています。
現時点でMVCアプリケーションがSitecoreディクショナリを使用していない場合は、Next.jsアプリからディクショナリの使用を一時的に削除できます。 src/lib/page-props-factory.tsファイルで、ディクショナリ呼び出しを削除します。
MVCアプリケーションが多言語の場合は、Sitecoreの設定に合わせてNext.jsアプリケーションで国際化を構成する必要があります。それ以外の場合は、JSS Next.jsアプリからコンテンツ翻訳機能を削除します。
代わりにレイアウトデータを使用するには、マークアップをRazorビューに直接挿入するC# コードをリファクタリングする必要があります。たとえば、動的 <meta/> タグをheadプレースホルダーに追加します。

Next.jsアプリケーションを起動します

Next.jsアプリケーションは、開発モードまたは運用モードで起動できます。

アプリケーションを起動して開発を続行するには:

ターミナルで、JSS Next.jsアプリのルートディレクトリで、次のスクリプトを実行します。
RequestResponse
```
jss start:connected
```

アプリケーションを起動し、その運用動作をプレビューするには、次のようにします。

ターミナルで、JSS Next.jsアプリのルートディレクトリで、次のスクリプトを実行します。
RequestResponse
```
jss start:production
```

これらの手順を完了すると、Next.js JSSアプリケーションをデプロイできます。

また、MVC/RazorからReact/Next.jsにコンポーネントを段階的に変換するプロセスを開始することもできます。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、

チュートリアル: MVCアプリケーションの静的な生成

静的HTML生成のためのMVCアプリケーションの適応

レイアウトサービスの応答にMVCレイアウトのプレースホルダーを含める

MVCレンダリングのHTMLを出力するようにSitecoreレイアウト サービスを設定する

MVCアプリケーションをレンダリングするためのJSS Next.jsアプリケーションの準備

Next.jsアプリケーションを適応させて、既存のMVCアプリからレイアウトとアセットを提供する

Next.jsアプリケーションを起動します

MVCレンダリングのHTMLを出力するようにSitecoreレイアウトサービスを設定する