1. 既存のSitecore MVCアプリケーションをJamstackアーキテクチャにヘッドレスレンダリングで変換する方法

JSSを用いたMVCアプリの静的生成における制限と回避策

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

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

既存のMVCアプリケーションをヘッドレスJSSアプリケーションに変換するプロセスにはいくつかの制限があります。

Next.jsアプリケーションのエクスポート

Next.js with next exportが提供する静的エクスポート機能の使用に適用されるすべての制限があります。

next exportは多言語アプリをサポートしていないため、languageEmbeddingを無効にする必要があります。

languageEmbeddingを無効にするには:

  • Sitecore設定を変更し、languageEmbeddingの値をneverに設定してください:

    never

さらに、画像をレンダリングするMVCコンポーネントがある場合は、Sitecoreサーバー上のメディアファイルへの全パスを提供する必要があります。

!注Sitecore Experience EdgeはメディアファイルのCDNを提供し、すでに画像のサーバーURLを埋め込んでいます。

メディアソースURLにサーバーURLを含めるには:

  • Sitecore設定を修正してMedia.AlwaysIncludeServerUrl:

Sitecore AnalyticsとPersonalization

JSSアプリにおけるSitecoreの分析やパーソナライズ に関するすべての制限が適用されます。

セッションベースの機能

サーバー側のセッション情報(ASP.NETやクッキー)に依存する機能、例えばアカウントログイン、カート情報、GDPR準拠などは、Next.jsの静的生成では使用できません。

セッションベースの機能を使用するには、以下のいずれかを行う必要があります。

  • Next.jsのサーバーサイドレンダリングルートを使用してください。この方法はExperience Edgeでは機能しません。

  • Next.jsのリライトを使って、Sitecore CDへの完全なパススルーをインクリメンタル戦略として行ってください。例えば、サイトのアカウントセクション全体を延期することができます:

    { source: '/account/

    *', destination: `${jssConfig.sitecoreApiHost}/account/
    *`, }

  • アプリケーションをクライアントサイド方式でリファクタリングします。これは、ヘッダーの条件付きLogin/LogoutやGDPR準拠の承認など、サイトの全ページに表示されるコンポーネントに対して好まれるアプローチである可能性が高いです。

Sitecoreフォーム

既存のMVCフォームをJSSアプリケーションで動作させるには、MVCフォームラッパーがHTMLとしてレンダリングされ、Next.jsアプリケーションがフォームに必要なリダイレクトを持つように調整が必要です。

!重要Sitecore FormsはRESTレイアウトサービスとサーバー側レンダリングを使う場合のみNext.jsと連携します。

MVCフォームラッパーをHTMLとしてレンダリングするには:

フォーム固有のリダイレクトを設定するには:

  • Next.js JSSアプリのnext.config.jsファイルのredirectsセクションで、以下のルールを追加してください:

    // Sitecore forms { source: '/sitecore%20modules/

    *', destination: `${jssConfig.sitecoreApiHost}/sitecore%20modules/
    *`, }, { source: '/formbuilder', destination: `${jssConfig.sitecoreApiHost}/formbuilder`, },

!ヒントNext.jsアプリケーションにフォームを実装することを検討してください。

この記事を改善するための提案がある場合は、 お知らせください!