🧜🏿 🤛🏽 🎉 Vue.jsでのサーバー側レンダリング 😲 👴🏾 🕵🏾

最近では、Vue.jsがサーバーレンダリングの本格的なサポートを取得しました。インターネットには適切に調理する方法に関する情報がかなりあるため、Vue.jsでSSRを使用してアプリケーションを開発するために必要な環境を作成するプロセスを詳細に説明することにしました。

議論されるすべてのものはgithubのリポジトリに実装されます。私は頻繁にそのソースを参照し、実際に何が起こっているのか、なぜこれが必要なのかを説明しようとします:)

この記事では、SSRのかなり一般的なアプローチについて説明します（ 使用する準備が必要な場合は、 Nuxt.jsを参照できます ）。したがって、上記の一部またはすべてを他のフレームワークに適用できる可能性があります/ AngularやReactなどのライブラリ。

私は公式文書を無料で改名するという目標を設定していませんでしたので、プロセスを完全に理解するためには、少なくともそれを見ることをお勧めします。

はじめに

SSRを使用するアプリケーションの主なアイデアは、サーバーとクライアントで実行されるときに同じHTMLマークアップを生成することです。

HTMLで置換されるデータは、同じまたは別のサーバー/ドメインにあるAPIによってプルされる必要があります。 APIサーバーのセットアップと開発はこの記事の範囲外ですが、 axiosまたは他の同形のhttpクライアントをクライアントとして使用できます。

また、サーバーにDOMがないことを覚えておく必要があります。そのため、ドキュメント、ウィンドウ、その他のナビゲーターでのすべての操作は、まったく使用しないか、クライアント、つまりbeforeMount、mountedなどのフックでのみ実行する必要があります。

以下に、コードで何が起こっているのかを明確にしようとする多くの手紙があります。 したがって、文字が読みにくいと思われる場合は、すぐにコードを調べることをお勧めします:)リポジトリの対応する部分へのリンクは、各セクションで提供されます。

Webpackの構成

コード

ビルドは、3つの主要なWebパック構成-一般、サーバー用のビルド、クライアント用のビルドに分かれています。アセンブリ後、クライアント用のファイルセットとサーバー用のjsファイルが1つだけの2つの独立したバンドルを受け取る必要があります。

バンドルごとに、明らかに、個別のエントリを作成する必要がありますが、それについては後で詳しく説明します。

一般アセンブリ（base.js）には、すべての静的、テンプレート、JavaScriptソース、およびvueコンポーネントのローダーが含まれています。理論的にはスタイルもここに含めることができますが、明らかな理由により、スタイルはサーバー上で必要ないため、クライアントに対してのみ登録されます。

クライアントアセンブリ（client.js）は、ブラウザーで必要なもの全体に追加します。ルールは、css、スタイラス、sass、postcssなどのブートローダーを指定します。

ここに出力を追加して、バンドルを複数のファイルに分割したり、CSSを抽出したり、uglifyなどを実行することもできます。一般的に、すべてはいつものように:)

ここでは、html-webpack-pluginを使用して一般的なHTMLテンプレートの生成を追加します。私はそれをもう少し低めに説明します。

SSRのアセンブリ（server.js）は、サーバーで処理する単一のjsファイルを作成する必要があります。誰もhttp経由でアップロードしないため、ファイルサイズについては心配していません。したがって、通常、最適化のためにconfigsに記述されているものはすべてここでは意味がありません。

target: node

、スタイルおよび外部用のnullローダーも指定する必要があります。外部はpackage.jsonからすべてのパッケージを指定し、webpackはサーバー上のnode_modulesから接続されるため、インストールされたパッケージがアセンブリに含まれないようにします。

 { target: 'node', externals: Object.keys(require('../../package.json').dependencies) }

一般的なアプリケーションテンプレート

コード

一般的なテンプレートは、レンダリングされたVueアプリケーションコードが挿入される一般的なHTMLマークアップです。特別に訓練されたライブラリのないサーバーはDOMについて何も知らないことを理解することが重要です。したがって、テンプレートに特定の文字列を入力する必要があります。これは、部分文字列をアプリケーションのマークアップに置き換えるだけの単純な置換になります。例では、これは単なる

（または//APP

）ですが、他のものでも構いません。

頭の中のスクリプト、スタイル、タグは少し簡単です-同じ置換を使用して、 </body>

/ </head>

前に挿入します。

アセンブリとサーバー

SSRを機能させるには、Node.js上のサーバー（この例ではExpress）が必要です。これは、開発中にその場でプロジェクトをビルドします。ここには多くのコードがあるので、開発用のサーバー起動ポイントとサーバー構成の例を簡単に確認できます。

いくつかの微妙な点：

クライアントのvue-metaプラグインがマークアップの準備ができており、メタタグを複製しないことを理解できるように、一般的なテンプレートを準備する必要があります。これを行うには、 <html>

値のない特別な属性data-vue-meta-server-rendered

を挿入するだけです。属性名はカスタマイズ可能であるため、プロジェクトで異なる場合があります（たとえば、これは短いのでdata-meta-ssr

に置き換えることにしました）。
また、テンプレートでは、vue-metaプラグインから必要なものすべてを置き換える必要があります。htmlおよびbodyの属性、メタタグ、リンク、noscriptなどです。最も単純なバージョンでは、これは次のようになります。

 // ... const { title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta } = context.meta.inject() res.write(` <!doctype html> <html data-vue-meta-server-rendered ${htmlAttrs.text()}> <head> ${meta.text()} ${title.text()} ${link.text()} ${style.text()} ${script.text()} ${noscript.text()} </head> <body ${bodyAttrs.text()}> ... `) // ...

サーバーバンドル（以前はwebpackを使用してコンパイルされていた）を正しく処理するには、vue-server-rendererを使用する必要があります。vue-server-rendererは、バンドルとそのエンコーディングでファイルを指定する必要がありますパラメータの詳細については、公式ドキュメントをご覧ください。少なくとも1つの興味深いパラメーターrunInNewContextがあります。これにより、レンダリングの最適な最適化が可能になりますが、特定のルールが適用されます（これについては、エントリーポイントのセクションで後述します）。
APIからのすべてのデータはレンダリング中にロードされるため、クライアントに再度ダウンロードする必要はありません。しかし、クライアントは明らかにマークアップからそれらを取り出すことはできないため、マークアップとともにデータを渡す必要があります。このタスクはできるだけ簡単に解決されます。必要なすべてのデータが変数に書き込まれるスクリプトがマークアップに追加されます。データ自体はJSON.stringify

で処理され、さらに良いことにserialize-javascriptを使用して処理されJSON.stringify

。

 const serialize = require('serialize-javascript') // ... res.write(`<script> window.__INITIAL_VUEX_STATE__=${serialize(context.initialVuexState)} </script>`); res.write(`<script> window.__INITIAL_COMP_STATE__=${serialize(context.initialComponentStates)} </script>`);

開発モード

サーバーが開発モードで起動した場合、サーバー自体はほぼ同じ方法で動作します。違いは2点のみです。レンダリング中に発生したエラーは異なる方法で処理されます。また、アプリケーションコードを変更すると、一般的なテンプレートのレンダラーとマークアップが新しいものに置き換えられます。

サーバー自体に加えて、ソースを変更するときにwebpack(clientConfig).watch

を実行して、その場でアセンブリを生成する必要があります。この前に、webpackは、HotModuleReplacementPluginなど、開発に必要なすべてのプラグインで初期化されます。

また、新しいバンドルアセンブリについてクライアントに通知する必要があります。これにはwebpack-dev-middlewareとwebpack-hot-middlewareが必要です。新しいアセンブリが表示されたとき（つまり、アプリケーションのソースコードが変更されるたびに）、変更されたコードをクライアントに配信する必要があります。

webpack(serverConfig).watch

れ、サーバーバンドルは変更されると新しいものに置き換えられます。私の場合、単純なコールバック（ build/setup-dev-server.js

50行目、 index.js

73行目）を使用して変更されたことを報告しbuild/setup-dev-server.js

。

アプリケーションのエントリポイント

コード

上で述べたように、SSRとクライアント用のアプリケーションの2つの個別のエントリポイント（webpackのエントリ）を作成する必要があります。実際、ここでは、webpackの設定と同様に、サーバー、クライアントの共通コードを持つ3つのファイルがあります。

共通コード（app.js）には、アプリケーションの一般的な初期化が含まれています。つまり、Vueプラグインを接続し、vuexストア、ルーター、および新しいルートコンポーネントを作成します。また、グローバルコンポーネント、フィルター、およびディレクティブも登録します。

ここでは、アプリケーションのメインコンポーネントとルートコンポーネントが1つになるように、ルートコンポーネントをアプリケーション自体のテンプレートとロジックを持つvueファイルと混合する必要があります。

vue-server-rendererには、runInNewContextオプションがあり、これは無効にできますが、パフォーマンスが大幅に向上することが重要です。しかし、それを使用するには、アプリケーションを毎回初期化する必要があるため、app.jsでは、Vueコンポーネントの既製のオブジェクトではなく、初期化する関数を返します。このファイルで直接実行されるコードは、サーバーの起動時に一度だけ実行されるため、覚えておく必要があります。ここでは、ランタイムで受信したデータに依存しない一般的な瞬間を登録できます-コンポーネント、フィルター、ディレクティブの登録、環境変数の抽出など。など

クライアント（client.js）のエントリポイント 。ここでは、app.jsの関数を使用してアプリケーションが作成され、それが読み込まれ、ブラウザーでの正しい操作に必要なすべてが読み込まれます。

また、このページに表示されるコンポーネントのデータオブジェクトとvuexストアの状態も置き換えます。

 if (window.__INITIAL_VUEX_STATE__) { //   state    app.$store.replaceState(window.__INITIAL_VUEX_STATE__); delete window.__INITIAL_VUEX_STATE__; } if (window.__INITIAL_COMP_STATE__) { app.$router.onReady(() => { //   ,      // (    ,   )... const comps = app.$router.getMatchedComponents() // ...  ,       .filter(comp => typeof comp.prefetch === 'function'); for (let i in comps) if (window.__INITIAL_COMP_STATE__[i]) // ,    data // (  $data     ,     ) comps[i].prefetchedData = window.__INITIAL_COMP_STATE__[i]; delete window.__INITIAL_COMP_STATE__; }); }

ルートコンポーネントを取得し、アプリケーションのルート要素で$mount

を呼び出すことで、コードを終了します。この要素にはdata-server-rendered

が自動的に与えられるため、これを行うことができます： app.$mount(document.body.querySelector('[data-server-rendered]'))

。

SSR（server.js）のエントリポイント 。要求コンテキスト（つまり、Expressからの要求オブジェクト）を受け取り、アプリケーションを初期化する関数を作成するだけです。関数はプロミスを返す必要があります。これは、必要なデータがすべてAPIからダウンロードされた時点で満たされ、アプリケーションをクライアントに送信する準備が整います。

この関数の手順は次のとおりです（コード）：

app.jsからアプリケーションを作成します。
APIサーバーにローカルでアクセスできるように、axiosでbaseUrlを構成します（必要な場合）。ここでは、ブラウザが存在しないため、少なくともドメインとプロトコルを取得できる場所オブジェクトは存在しないため、手動で登録する必要があります。
コンポーネントとURLが見つかったときに実行されるvue-router ready（ app.$router.onReady(...)

）のハンドラーを設定しますapp.$router.onReady(...)
1. このページのすべての非同期コンポーネントを取得し、それらの機能を実行して非同期データをプルします。返された約束を配列に収集します。
2. Promise.all
  
  すべての約束を完了することをPromise.all
  
  ます。
3. vue-meta、vuex状態からコンテキスト情報に追加することで解決し、非同期操作の結果として取得されたデータをコンポーネントとコンテキストに書き込みます。
コンテキスト（ app.$router.push(context.url)

）からURLを処理する時間であることをルーターに伝えます。

さらに、受信したデータはすべてhttpサーバーによって処理され、コンポーネントはマークアップを提供し、マークアップデータはテンプレートに書き込まれ、結果のHTMLはクライアントに送信されます。

コンポーネントとルーティング

ルーターとそのコンポーネントを登録するためのコード。

SSRを使用してアプリケーションを開発するには、ルートコンポーネントに関連付けられているルートコンポーネントのみが、レンダリング前にデータを非同期にロードできるという事実から進める必要があります。これらのコンポーネントについては、特別な方法で、ルートへの変更を処理し、レンダリング後にサーバーが返したデータを記録する必要があります。これらの目的のための良い解決策は、ルーターが初期化されるときに各コンポーネントに自動的に接続するミックスインを作成することです。同様のミックスインのサンプルコード。

prefetch-mixinでは、次のようなものを追加する必要があります。

created-hookは、prefetchDataフィールドを取得し（アプリケーションの初期化中、コンポーネントデータはレンダリング後にサーバーから取得したこのフィールドに書き込まれるか、サーバーでのレンダリング中に直接記録されます）、 this.$data

値を完全に置き換えますthis.$data

fields from this.constructor.extendOptions.prefetchData

、ただし、アプリケーションが完全に初期化される前にのみ、これから何を見つけることができますかthis.$root._isMounted

。
beforeMountフックは、別のルートへの移行がある場合に、ページのロード後にのみクライアントでプリフェッチを呼び出します。
beforeRouteUpdateフックは、ルートパラメータを変更するときにクライアントでのみプリフェッチを呼び出します。

 function update(vm, next, route) { if (!route) route = vm.$route; const promise = vm.$options.prefetch({ store: vm.$store, props: route.params, route }); if (!promise) return next ? next() : undefined; promise .then(data => { Object.assign(vm.$data, data); if (next) next(); }) .catch(err => next && next(err)); } const mixin = { //        created() { if (this.$root._isMounted || !this.constructor.extendOptions.prefetchedData) return; Object.assign(this.$data, this.constructor.extendOptions.prefetchedData); }, //  prefetch    (   ,      created) beforeMount() { if (this.$root._isMounted && this.$options.prefetch) update(this); } //  prefetch,     //        ,   beforeMount    beforeRouteUpdate(to, from, next) { if (this.$options.prefetch && to.path !== from.path) update(this, next, to); else next(); }, };

さらなる開発

SSRは、アプリケーション開発にほとんど制限を課しません。サーバー上でコードが実行されるブラウザAPIは使用できないことを覚えておくだけで十分です。他の場合は、マウント/マウントの前にクライアントフックにコードを配置します。

また、SSRで動作するように設計されたアプリケーションはSSRなしでも正常に動作するため、従来のSPAでも同様のアプローチを使用して、SEO要件が突然現れた場合に、頭を悩ませずにサイトを最適化するために松葉杖を書く必要はありません。

ディレクティブに問題がある可能性があり、その役割はしばしばDOMの操作に要約されますが、サーバー自体のディレクティブの代わりに代替実装（空？）を与えることで簡単に解決できます（ docs ）。

一般に、アプリケーション自体の開発を開始する前に考慮する必要があるのはこれだけです。次に、コンポーネントを作成し、ページコンポーネントを対応するルートに接続します。すべてが正しく行われると、サーバーからレンダリングされたページを受け取り、クライアントでアプリケーションが正しく動作します。

Vue.jsでのサーバー側レンダリング