---
title: "既存のSitecore MVCアプリケーションをJamstackアーキテクチャにヘッドレスレンダリングで変換する方法"
slug: "converting-existing-sitecore-mvc-applications-to-the-jamstack-architecture-with-headless-rendering"
abstract: "ヘッドレスサービスとJSSで静的にMVCアプリケーションをレンダリングし、徐々にMVCソリューションをJavaScriptに変換していきます"
---
# 既存のSitecore MVCアプリケーションをJamstackアーキテクチャにヘッドレスレンダリングで変換する方法

Sitecoreが提供するヘッドレスレンダリングソリューションを使えば、既存のSitecore MVCソリューションを最新の[Jamstack](https://jamstack.org/)アーキテクチャに移行できます。

Jamstackを理解するために、以下の動画をご覧ください。

:::youtube{id="mBOPr4djFMg"}

[Sitecore Headless Services](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/sitecore-headless-services.html "Sitecore Headless Services")および[Sitecore JavaScript Services SDK (JSS)](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html "Sitecore JavaScript Services SDK (JSS)")を使えば、[Headless ServicesとJSSを使って静的にMVCアプリケーションを生成](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/walkthrough--statically-generating-an-mvc-application.html "Walkthrough: Statically generating an MVC application")できます。

このプロセスが完了した後、[MVC/RazorからReact/Next.jsへのコンポーネントを段階的に変換](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/convert-components-from-mvc--c--razor--to-next-js--javascript-react--incrementally.html "Convert components from MVC (C#/Razor) to Next.js (JavaScript/React) incrementally")できます。

> !注変換プロセスには、サービス[Sitecore JavaScript SDK(JSS)、](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html "Sitecore JavaScript Services SDK (JSS)")[Next.js](https://nextjs.org/)、[Next.js Sitecore JavaScriptレンダリングSDK(JSS)](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js")にある程度の慣れが必要です。
> 
> SXAの申請には追加の考慮が必要であり、SXA固有の情報は後ほど利用可能です。

## アーキテクチャの概要

既存のSitecore MVCサイトに対するJamstackアーキテクチャは、SitecoreレイアウトサービスがMVCコンポーネントをHTMLにレンダリングし、出力に含める能力によって可能となります。

以下の図は [、Experience Edge](urn:resource:component:691962)およびNext.jsを使用した場合のSitecore MVCコンポーネントの公開およびレンダリングプロセスを示しています。

![Architecture overview of static HTML generation of MVC applications](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/22/sitecore-headless-development/images/static-generation-diagram.svg)

公開およびレンダリングのプロセスは以下のステップで構成されています。

1.  レイアウトサービスは通常のサービス出力に埋め込まれたHTMLとしてMVCコンポーネントを出力します。
2.  レイアウトサービスの出力は各ページやルートとともにExperience Edgeに公開され、Next.jsなどのSitecoreヘッドレスSDKによってクエリされます。
3.  Next.jsアプリケーションはルートのレイアウトサービスの出力を問い合わせ、それを1つ以上の Placeholder コンポーネントに渡します。
4.  レイアウトデータに componentName プロパティがないため、Sitecore Next.js SDKの Placeholder コンポーネントはSitecoreコンポーネントをプリレンダリングされたドキュメントにHTMLとして直接レンダリングします。