JSSを使用する際のベストプラクティス

コンテンツ作成者管理と互換性のあるアプリを構築するには、コンポーネント階層やテキストや画像などの非コード コンテンツをハードコーディングしないようにする必要があります。代わりに、コンポーネント内でJSSパッケージのコンポーネントを使用します - これにより、コンテンツ作成者によって生成された動的データがコンポーネントに提供されます。

コンポーネントのネストを明示的にハードコーディングしないでください。代わりに、JSSライブラリの <Placeholder> コンポーネントを使用して、コンテンツ作成者が他のコンポーネントをネストできるバスケットをコンポーネントに作成します。

コンテンツ作成者が制御する必要がある値がコンポーネントにある場合は、TextやImageなどの関連フィールドコンポーネントをJSSライブラリからインポートし、これらの値の代わりにこれらのコンポーネントを使用します。フィールド値をハードコードしたり、他の方法で挿入したりしないでください。

Sitecoreは、強力なマーケティング機能を備えた複雑なアプリケーションを構築するためのツールのコレクションです。

Sitecoreサイトが構築された後、Sitecoreは、エンドユーザーのWebサイトexperienceを分析、育成、およびパーソナライズするためのさまざまなツールと統合をユーザーに提供します。Sitecoreサイト (つまりJSSアプリ) の主なクライアントは、マーケター、Sitecore管理者、コンテンツ作成者です。開発者は、これらのクライアントのビジネス要件を満たすJSSアプリケーションを構築する必要があります。つまり、JSSアプリはSitecoreオーサリング インターフェイスとの互換性を維持し、サイトおよびコンテンツ管理機能を制限する可能性のある技術的な制限を導入しないようにする必要があります。

Sitecoreでは、コンテンツ作成者は、目的のURL構造に基づいてコンテンツ ツリーを整理することで、各ページのURLを制御できます。JSSアプリは、この機能を完全にサポートすることが期待されています。JSSアプリは、コンテンツ作成者によって制御されるURL構造をサポートする ためのカスタム ルーティング を実装します。

SSRの互換性を維持するには、次のようなブラウザー固有のオブジェクトの使用を排除します。

これらのブラウザー固有のオブジェクトを使用する必要がある場合は、現在の実行コンテキストをチェックする条件でコードをラップするか、SSR中に起動しないライフサイクル メソッドにコードを配置します。

JSSには、アプリが現在Node.jsコンテキストでレンダリングされているかどうかを確認するためのユーティリティ関数isServer() があります。これを制御フローと共に使用して、SSRコンテキストを処理できます。例えば：

import { isServer } from ‘@sitecore-jss/sitecore-jss’;

fetch('https://some-url', { options }).catch((error) => {
  if (isServer()) {
    // use Node's global console object to log the error
    console.error('Error:', error);
  } else {
    // Notify the user about the error. Note: this is for code demonstration only;
    // this is not an attractive way to show errors to end-users
    window.alert('An error has occurred.');
  }
});

プロジェクトでサードパーティの依存関係を使用する場合、SSRをサポートするために追加の構成またはミドルウェアが必要になる場合があります。

SSRの互換性については、ドキュメントを確認してください - 初期化オプション、レンダリング時間パラメータ、SSRに固有のビルド設定などに関する特別なものを探してください。

注意すべき一般的な依存関係は次のとおりです。

インポート サービスは、コードファーストのSitecoreアイテム アーティファクトをSitecoreにデプロイするためや、Sitecoreファーストの開発者用スキャフォールディングに使用されます。このサービスは、Sitecoreヘッドレス サービスのインストール時に自動的にインストールされます。