---
title: "SSR対応JSSアプリのベストプラクティス"
slug: "best-practices-for-ssr-compatible-jss-apps"
abstract: "SSR互換JSSアプリを構築する際のベストプラクティスと推奨事項"
---
# SSR対応JSSアプリのベストプラクティス

コンテンツ作成者がグラフィカルユーザーインターフェースでコンポーネントを編集できるように、オーサリング環境との互換性を維持するために、本番ビルドがクライアント側レンダリングを使っていても、すべての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。