既存のSitecore MVCアプリケーションをヘッドレスレンダリングによるJamstackアーキテクチャに変換する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecoreが提供するヘッドレスレンダリングソリューションを使用すると、既存のSitecore MVCソリューションを最新のJamstackアーキテクチャに移行できます。
Jamstackを理解するには、次のビデオをご覧ください。
Sitecore Headless ServicesとSitecore JavaScript Rendering SDKs (JSS)を使用すると、ヘッドレスサービスとJSSを使用してMVCアプリケーションを静的に生成できます。
このプロセスが完了したら、MVC/RazorからReact/Next.jsにコンポーネントを段階的に変換できます。
変換プロセスには、Next.jsのSitecore JavaScript Rendering SDKs (JSS)、Next.js、およびSitecore JavaScriptレンダリングSDK (JSS) にある程度精通している必要があります。
SXAアプリケーションには追加の考慮事項が必要であり、SXA固有の情報は後で利用可能になります。
アーキテクチャの概要
既存のSitecore MVCサイトでのJamstackアーキテクチャは、Sitecore Layout ServiceがMVCコンポーネントをHTMLにレンダリングし、それらを出力に含めることができるためです。
次の図は、Experience EdgeとNext.jsを使用する場合のSitecore MVCコンポーネントの公開とレンダリングのプロセスを示しています。
公開とレンダリングのプロセスは、次の手順で構成されます。
-
レイアウトサービスは、MVCコンポーネントをHTMLとして出力し、通常のサービス出力に埋め込みます。
-
レイアウト サービスの出力は、各ページ/ルートでExperience Edgeにパブリッシュされるため、Next.jsなどのSitecoreヘッドレスSDKでクエリを実行できます。
-
Next.jsアプリケーションは、レイアウト サービス出力に対してルートを照会し、それを1つ以上のPlaceholderコンポーネントに渡します。
-
レイアウト データにcomponentNameプロパティがないため、Sitecore Next.js SDKのPlaceholderコンポーネントは、SitecoreコンポーネントをHTMLとしてプリレンダリングされたドキュメントに直接レンダリングします。