Vue SSR ガイド

Vue.js サーバサイドレンダリングガイド

注意: このガイドは Vue.js またはサポートしているライブラリの以下の最小バージョンを必須としています:

  • vue & vue-server-renderer 2.3.0 以上
  • vue-router 2.5.0 以上
  • vue-loader 12.0.0 以上 & vue-style-loader 3.0.0 以上

もし以前に、 SSR で Vue 2.2 を使用していた場合、 推奨されるコードの構造が少しだけ違うことに気がつくでしょう (新しいオプションの runInNewContext を false にしている場合)。あなたの既存のアプリケーションは依然として動作はするでしょうが、新しく推奨される方に移行されることをオススメします。

サーバサイドレンダリング (SSR) とは何か?

Vue.js はクライアントサイドアプリケーションを構築するためのフレームワークです。通常では、Vue コンポーネントはブラウザで DOM を生成し操作がされます。しかし、同じ Vue コンポーネントをサーバ上の HTML 文字列に描画し、ブラウザに直接送信し、最終的に静的なマークアップとしてクライアント上の完全なインタラクティブアプリケーションに "ハイドレート (hydrate)" することもできます。

サーバで描画された Vue.js のアプリケーションは、アプリケーションのコードの大部分が、サーバとクライアントの両方で実行されるという意味で、"アイソモルフィック (isomorphic)" や "ユニバーサル (universal)" と見なすことができます。

どうして SSR なのか?

従来の SPA (シングルページアプリケーション) と比べて、SSR の利点は主に次の点にあります:

  • 検索エンジンのクローラが完全に描画されたページを直接解析するため、SEO が向上します。

    現在のところ、Google と Bing は同期的 JavaScript アプリケーションのインデックスを作成できます。同期がキーワードです。あなたのアプリケーションが読み込み中にスピナが表示され、Ajax 経由でコンテンツを取得する場合、クローラーはあなたが完了するまで待たないでしょう。つまり、SEO が重要なページで非同期にコンテンツを取得する場合は、SSR が必要な場合があります。

  • 特にインターネットの遅さや遅いデバイスでは、コンテンツの再生時間が短縮されます。サーバで描画されたマークアップは、すべての JavaScript がダウンロードされて表示されるまで待つ必要がないので、ユーザは完全に描画されたページをすぐに見ることができます。これにより、一般的にユーザーエクスペリエンスが向上し、コンテンツの所要時間が直接コンバージョン率に関連付けられているアプリケーションにとっては重要になります。

SSR を使用する際に考慮すべきトレードオフも何点かあります:

  • 開発上の制約。 ブラウザ固有のコードは、特定のライフサイクルフック内でのみ使用できます。一部の外部ライブラリは、サーバで描画されたアプリケーションで実行できるように特別な処理が必要な場合があります。

  • より複雑なセットアップと開発の要件を構築します。静的ファイルサーバに展開できる完全静的 SPA とは異なり、サーバで描画されたアプリケーションでは Node.js サーバを実行できる環境が必要になります。

  • サーバ側の負荷が増えます。 Node.js の完全なアプリケーションを描画することは、静的ファイルを提供するだけでなく、CPU を多用することになるので、トラフィックが多いことが見込まれる場合は、対応するサーバの負荷に備え、キャッシュの対策を賢明に行なってください。

あなたのアプリケーションに SSR を使用する前に、まず初めに、実際に SSR が必要かどうかを考える必要があります。これは主に、アプリケーションのコンテンツに対する時間の重要性によります。 例えば、最初の負荷の数百ミリ秒がそれほど重要ではない内部的なダッシュボードを構築する場合、SSR は過度なものとなるでしょう。しかし、コンテンツの所要時間が非常に重要な場合は、SSR を使用してできるだけ早く初期ロードパフォーマンスを保つことができます。

SSR vs プリレンダリング (事前描画)

もしあなたが、幾つかのマーケティングのページの SEO を向上させるためだけに SSR を調べているとしたら (たとえば /, /about, /contact など)、代わりに プリレンダリング (事前描画) を使用することをオススメします。 HTML を急いでコンパイルするために Web サーバーを使用するのではなく、プリレンダリングは、ビルド時に特定のルートに対して静的な HTML ファイルを生成します。利点はプリレンダリングを設定する方が遥かに簡単で、フロントエンドを完全に静的なサイトとして保つことができることです。

もしあなたが webpack を使用している場合、prerender-spa-plugin を使用することで簡単にプリレンダリングを実装することができます。 これは Vue アプリケーションで広くテストが行われています。実際には、作成者は Vue のコアチームメンバです。

このガイドについて

このガイドはサーバとして Node.js を使用してサーバで描画されたシングルページアプリケーションに焦点が当てられています。他のバックエンドの設定と Vue の SSR と混在させることは、それ自体主題であり、専用セクションで手短に議論されています。

このガイドは、Vue.js 自体に精通しており、且つ Node.js と webpack に関する実用的な知識を持っていることを前提としています。もしあなたが、すぐに使用できる高度なソリューションを求めている場合は、Nuxt.js を試してみてください。これは同じ Vue スタック上に構築されていますが、多くの定型文が抽象化されており、静的なサイト生成などの追加機能を提供します。しかし、アプリケーションの構造をより直接的に制御する必要がある場合は、ユースケースに合わない場合があります。いずれにしても、仕組みをより理解するために、このガイドを読むことはまだ有益です。

また、あなたが読まれているように、このガイドで説明されている技術のほとんどが HackerNews Demo にて使用されており、そちらを参照するととても役立つことでしょう。

最後に、このガイドの解決策は決定的なものではないことを覚えておいてください。私たちはこれらがうまく働くことを見つけていますが、これ以上改善がされないということではありません。将来改訂されるかもしれません。プルリクエストを送ることによって貢献することも、もちろん自由です！

基本的な使い方 →