SSR対応JSSアプリのベストプラクティス
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンテンツ作成者がグラフィカルユーザーインターフェースでコンポーネントを編集できるように、オーサリング環境との互換性を維持するために、本番ビルドがクライアント側レンダリングを使っていても、すべてのJSSコンポーネントをサーバーサイドレンダリング(SSR)対応に構築することを推奨します。
ご希望のフレームワークの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などです。
- GraphQLのデータグラフ実装、例えばApolloなど。
- ルーティングライブラリ(react-router、 vue-router)。
- CSS in-JSライブラリ、例えば styled-components や emotion。
- ドキュメントヘッドマネージャーライブラリ( react-helmet.
- 動的に負荷がかかるコンポーネント。例えば、 react-loadable。