1. サーバーサイドのレンダリングJSSアプリケーション

SSR互換JSSアプリのベスト プラクティス

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

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

オーサリング環境との互換性を維持し、コンテンツ作成者がグラフィカルユーザーインターフェイスでコンポーネントを編集できるようにするには、実稼動ビルドでクライアント側レンダリングを使用している場合でも、サーバーサイドレンダリング(SSR)と互換性のあるすべてのJSSコンポーネントをビルドすることをお勧めします。

選択したフレームワークのSSRガイドとベスト プラクティスに従うことを強くおすすめします。また、JSSアプリで使用するサードパーティ ライブラリのSSR互換性に関する推奨事項についても説明します。

ブラウザ固有のオブジェクトを慎重に扱う

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

  • window

  • document

  • localStorage

  • sessionStorage

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

JSSが提供するisServer() ヘルパーメソッドを使用してください

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 at attractive way to show errors to end-users
    window.alert('An error has occurred');
  }
});

サードパーティの依存関係を確認する

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

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

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

  • AxiosやSWRなどのデータフェッチライブラリ。

  • 状態管理ライブラリ。たとえば、ReduxやVuexなどです。

  • ApolloなどのGraphQLデータグラフの実装。

  • ルーティング ライブラリ (react-router、vue-router)

  • styled-componentsやemotionなどのCSS-in-JSライブラリ

  • react-helmet.

  • 動的に読み込まれるコンポーネント。たとえば、react-loadable.

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