|
| 1 | +# Vue.js サーバサイドレンダリングガイド |
| 2 | + |
| 3 | +> **注意:** このガイドは Vue.js またはサポートしているライブラリの以下の最小バージョンを必須としています: |
| 4 | +> - vue & vue-server-renderer >= 2.3.0 |
| 5 | +> - vue-router >= 2.5.0 |
| 6 | +> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0もしあなたが以前に、 SSR で Vue 2.2 を使用していた場合、 推奨されるコードの構造が[少しだけ違うこと](./structure.md)に気がつくでしょう (新しいオプションの [runInNewContext](./api.md#runinnewcontext) を `false` にしている場合)。あなたの既存のアプリケーションは依然として動作はするでしょうが、新しく推奨される方に移行されることをオススメします。 |
| 7 | +
|
| 8 | +## サーバサイドレンダリング (SSR) とは何か? |
| 9 | + |
| 10 | +Vue.js はクライアントサイドアプリケーションを構築するためのフレームワークです。通常では、Vue コンポーネントはブラウザで DOM を生成し操作がされます。しかし、同じ Vue コンポーネントをサーバー上の HTML 文字列にレンダリングし、ブラウザに直接送信し、最終的に静的なマークアップとしてクライアント上の完全なインタラクティブアプリケーションに "ハイドレート" することもできます。 |
| 11 | + |
| 12 | +サーバでレンダリングされた Vue.js のアプリケーションは、アプリケーションのコードの大部分が、サーバとクライアントの**両方**で実行されるという意味で、"isomorphic" や "universal" と見なすことができます。 |
| 13 | + |
| 14 | +## どうして SSR なのか? |
| 15 | + |
| 16 | +従来の SPA（シングルページアプリケーション）と比べて、SSR の利点は主に次の点にあります: |
| 17 | + |
| 18 | +- 検索エンジンのクローラーが完全にレンダリングされたページを直接解析するため、SEO が向上します。 |
| 19 | + |
| 20 | +現在のところ、Google と Bing は同期的 JavaScript アプリケーションのインデックスを作成できます。同期がキーワードです。あなたのアプリケーションが読み込み中にスピナーが表示され、Ajax 経由でコンテンツを取得する場合、クローラーはあなたが完了するまで待たないでしょう。つまり、SEO が重要なページで非同期にコンテンツを取得する場合は、SSR が必要な場合があります。 |
| 21 | + |
| 22 | +- 特にインターネットの遅さや遅いデバイスでは、コンテンツの再生時間が短縮されます。サーバでレンダリングされたマークアップは、すべての JavaScript がダウンロードされて表示されるまで待つ必要がないので、ユーザーは完全にレンダリングされたページをすぐに見ることができます。これにより、一般的にユーザーエクスペリエンスが向上し、コンテンツの所要時間が直接コンバージョン率に関連付けられているアプリケーションにとっては重要になります。 |
| 23 | + |
| 24 | +SSR を使用する際に考慮すべきトレードオフも何点かあります: |
| 25 | + |
| 26 | +- 開発上の制約。 ブラウザ固有のコードは、特定のライフサイクルフック内でのみ使用できます。一部の外部ライブラリは、サーバレンダリングされたアプリケーションで実行できるように特別な処理が必要な場合があります。 |
| 27 | +- より複雑なセットアップと開発の要件を構築します。静的ファイルサーバに展開できる完全静的 SPA とは異なり、サーバレンダリングされたアプリケーションでは Node.js サーバを実行できる環境が必要になります。 |
| 28 | +- サーバ側の負荷が増えます。 Node.js の完全なアプリケーションをレンダリングすることは、静的ファイルを提供するだけでなく、CPU を多用することになるので、トラフィックが多いことが見込まれる場合は、対応するサーバーの負荷に備え、キャッシュの対策を賢明に行なってください。 |
| 29 | + |
| 30 | +あなたのアプリケーションに SSR を使用する前に、まず初めに、実際に SSR が必要かどうかを考える必要があります。これは主に、アプリケーションのコンテンツに対する時間の重要性によります。 例えば、最初の負荷の数百ミリ秒がそれほど重要ではない内部的なダッシュボードを構築する場合、SSR は過度なものとなるでしょう。しかし、コンテンツの所要時間が非常に重要な場合は、SSR を使用してできるだけ早く初期ロードパフォーマンスを保つことができます。 |
| 31 | + |
| 32 | +## SSR vs プリレンダリング |
| 33 | + |
| 34 | +もしあなたが、幾つかのマーケティングのページの SEO を向上させるためだけに SSR を調べているとしたら (たとえば `/`, `/about`, `/contact` など)、代わりに**プリレンダリング**を使用することをオススメします。 HTML を急いでコンパイルするために Web サーバーを使用するのではなく、プリレンダリングは、ビルド時に特定のルートに対して静的な HTML ファイルを生成します。利点はプリレンダリングを設定する方が遥かに簡単で、フロントエンドを完全に静的なサイトとして保つことができることです。 |
| 35 | + |
| 36 | +もしあなたが webpack を使用している場合、[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) を使用することで簡単にプリレンダリングを実装することができます。 これは Vue アプリケーションで広くテストが行われています。 - 実際には、[作成者は](https://github.com/chrisvfritz) Vue のコアチームメンバーです。 |
| 37 | + |
| 38 | +## このガイドについて |
| 39 | + |
| 40 | +このガイドでは、Node.js をサーバとして使用しサーバレンダリングされたシングルページアプリケーションに焦点を当てています。 Vue SSR と他のバックエンドの設定を混在させることは、独自のトピックであり、このガイドでは説明していません。 |
| 41 | + |
| 42 | +このガイドは、Vue.js 自体に精通しており、且つ Node.js と webpack に関する実用的な知識を持っていることを前提としています。もしあなたが、すぐに使用できる高度なソリューションを求めている場合は、[Nuxt.js](http://nuxtjs.org/) を試してみてください。これは同じ Vue スタック上に構築されていますが、多くの定型文が抽象化されており、静的なサイト生成などの追加機能を提供します。しかし、アプリケーションの構造をより直接的に制御する必要がある場合は、ユースケースに合わない場合があります。いずれにしても、仕組みをより理解するために、このガイドを読むことはまだ有益です。 |
| 43 | + |
| 44 | +また、あなたが読まれているように、このガイドで説明されている技術のほとんどが [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/) にて使用されており、そちらを参照するととても役立つことでしょう。 |
| 45 | + |
| 46 | +最後に、このガイドの解決策は決定的なものではないことを覚えておいてください。 - 私たちはこれらがうまく働くことを見つけていますが、これ以上改善がされないということではありません。将来改訂されるかもしれません - プルリクエストを送ることによって貢献することも、もちろん自由です！ |
0 commit comments