既存の Sitecore MVC コンポーネント を ヘッドレス 環境で表示する
Sitecore XM/XP 10.2 以降と Sitecore Headless Services モジュール 19.0 以降で、ヘッドレス環境（Sitecore JavaScript Rendering SDK (JSS) for Next.jsなど）に既存の Sitecore MVC コンポーネントを組み合わせて表示できるようになりました。
今回はそのアーキテクチャと利用方法の紹介です
アーキテクチャ
アーキテクチャの図を以下に記載します。簡単に説明しますと既存の Sitecore MVC で作成したレンダリングを、JSS で作成したページ上にコンポーネントとして配置して表示できるようになりました。
詳細はこちらをご参照ください（英語）
利用方法
実際に簡単な MVC レンダリングを作成して説明していきます。
ヘッドレス環境を用意
Docker compose を利用して自身のPCに用意できます。こちらを参照ください。
MVC レンダリングを作成
Visual Studio でソリューションを開く
ヘッドレス環境を作成すると、Visual Studio のソリューションも作成されますのでそちらを開きます。
ASP.NET MVC プロジェクトを追加
Visual Studio のソリューションエクスプローラーのソリューションで右クリックしてプロジェクトを追加します。スクリーンショットは Visual Studio 2019 英語版になります。
ASP.NET Web Application を選択
プロジェクト名を入力（MVCRenderingとしています）し、Frameworkは.NET Framework 4.8を選択します。
Emptyを選択し、「Add folders & core references」の「MVC」をチェックします。
Advanced の部分は任意で選択してください。
Sitecore View Rendering を追加
Views で右クリックして新しいアイテムを追加
Sitecore ツリーの MVC を選択、Sitecore View Rendering を選択
Sitecore Rock のダイアログで以下 Renderings の追加場所を指定
MVCRendering.cshtml を編集
<div> の間に以下のように表示する項目を入れる
<p> Rendering Test </p>
MVCRendering.cshtml をパブリッシュ
プロジェクトで右クリックし、Publish を選択
Folder を選択
デプロイの場所をヘッドレスプロジェクトにある docker\deploy\platform を選択
以下のようになれば設定完了です
MVCRendering.cshtml を右クリックし、Publish MVCRendering.cshtml を選択
以下のように表示されれば成功です
MVC レンダリングの確認
MVCRendering アイテムの確認
Sitecore Rock で Path を確認します。
Visual Studio の Containers ビューの左のツリーで {project_name}_cm_1 を選択し、Files タブを選択。 inetpub\wwwroot\Views\MVCRendering.cshtml があることを確認
ダブルクリックするとファイルをプレビューすることができます。（編集はできません）
Render as HTML をチェック
Sitecore Rock で MVCRendering アイテム を一番下までスクロールし、 Render as HTML にチェックを入れる。
Content Editor でも同様に操作可能です。
JSS サンプルページに MVC レンダリングを組み込む
jss-main Placeholder Settings に MVCRendering を追加
Sitecore Rock 上で Placeholder Settings の jss-main の Allowed Controls に MVCRendering を追加します
こちらも Content Editor にて同様に操作可能です
Experience Editor にて MVCRendering を追加
Experience Editor にてサンプルページを開き、Component ボタンをクリックし、「Add here」ボタンを表示しクリック
MVCRenderingを選択
表示を確認
保存し、Publish を行い、CD でも表示されていることを確認
まとめ
以上で ASP.NET MVC にてシンプルな Rendering を作成し、JSS のページに組み込めることを確認しました。
メリットとして、既存のプロジェクトのリソースを利用しつつ、モダンなJSS環境で開発を行うことができます。
制限事項がいくつかありますのでご案内します。
Discussion