# サーバサイドレンダリングガイド

このガイドは執筆調整中です

# サーバサイドレンダリング（SSR）とは？

Vue.js はクライアントサイドのアプリケーションを構築するためのフレームワークです。デフォルトでは、 Vue コンポーネントは出力としてブラウザ内で DOM の生成と操作をします。しかしサーバから、同じコンポーネントを HTML 文字列にレンダリングして、それらをブラウザに直接送信して、最終的にはクライアント上での静的なマークアップを完全にインタラクティブなアプリケーションに「Hydrate（ハイドレート）」することも可能です。

サーバサイドレンダリングした Vue.js アプリケーションは、 「Isomorphic（アイソモルフィック）」とか「Universal（ユニバーサル）」と考えることもできます。これはつまり、アプリケーションのコードの大部分がサーバ と クライアントの両方で実行されるということを意味します。

# なぜ SSR なのか？

従来の SPA (Single-Page Application) と比べて、 SSR の利点は主に次の点です:

• 検索エンジンのクローラーが完全にレンダリングされたページを直接表示できて、検索エンジン最適化（SEO）が向上します。

  現在のところ、 Google と Bing は同期的な JavaScript アプリケーションを正常にインデックスできることには注意してください。同期がキーワードです。アプリケーションがローディングスピナーで始まり、API 呼び出しでコンテンツを取得する場合、クローラーはその完了を待ってくれません。つまり、 SEO が重要なページで非同期にコンテンツを取得する場合、 SSR が必要になるかもしれません。

• 特に遅いインターネット接続や遅いデバイスでも、コンテンツ表示までの時間が短縮されます。サーバレンダリングされたマークアップは、すべての JavaScript が表示のためにダウンロードと実行されるまで待つ必要がないため、ユーザがより早く完全にレンダリングされたページを見ることができます。これは一般的にユーザエクスペリエンスの向上につながり、コンテンツ表示までの時間がコンバージョン率に直結するようなアプリケーションでは重要になる可能性があります。

また、 SSR を使う際には考慮すべきいくつかのトレードオフがあります:

• 開発の制約。ブラウザ固有のコードは、特定のライフサイクルフックの中でしか使えません; 外部ライブラリの中には、サーバレンダリングしたアプリで実行するために特別な処理が必要になるものもあります。

• より複雑なビルドのセットアップとデプロイの要件。任意の静的なファイルサーバにデプロイできる完全に静的な SPA とは異なり、サーバレンダリングされたアプリケーションは Node.js サーバが動作する環境を必要とします。

• より大きなサーバサイド負荷。 Node.js で完全なアプリケーションをレンダリングすると、静的なファイルを配信するよりも CPU 負荷が高くなるため、高いトラフィックが予想される場合は、対応するサーバ負荷に備えて、キャッシュ戦略を賢く採用してください。

アプリケーションに SSR を使う前に、最初に確認すべきことは、本当に SSR が必要かどうかです。これはアプリケーションにとってコンテンツ表示までの時間がどれだけ重要かによります。例えば、内部のダッシュボードを構築していて、初期ロードで余計な数百ミリ秒があってもそれほど問題にならない場合、 SSR はやりすぎになります。ただし、コンテンツ表示までの時間が絶対的に重要な場合、 SSR は可能な限りの最高の初期ロードパフォーマンスを達成するのに役立ちます。

# SSR とプリレンダリングの比較

もし、ひと握りのマーケティングページ（例: /、 /about、/contact など）の SEO を改善するために SSR を検討しているならば、代わりに プリレンダリング が必要でしょう。プリレンダリングは、ウェブサーバを使ってオンザフライで HTML をコンパイルするのではなく、ビルド時に特定のルーティングの静的 HTML ファイルを生成します。利点はプリレンダリングの設定がよりシンプルで、フロントエンドを完全に静的サイトとして維持できることです。

Webpack (opens new window) を使っている場合、 prerender-spa-plugin (opens new window) でプリレンダリングを追加できます。このプラグインは、 Vue アプリケーションで広くテストされています。

# このガイドについて

このガイドは非常に詳細で、 Vue.js 自体に精通しており、 Node.js と Webpack の実用的な知識があることを前提としています。

最後に、このガイドのソリューションは決定的ではないことに注意してください - このソリューションはうまく動作していることがわかりましたが、それは改善できないという意味ではありません。将来的には改定される可能性があります - プルリクエストを出して気軽に貢献してください！