Vue の優れたプラクティス - SSR レンダリングを 0 から 1 に実装する-Vue.js-php.cn

Vue の優れたプラクティス - SSR レンダリングを 0 から 1 に実装する

WBOY

リリース： 2023-06-09 16:14:04

オリジナル

1201 人が閲覧しました

Web 開発において、SSR レンダリング (サーバーサイドレンダリング) は非常に重要なテクノロジです。サーバー上でページの初期レンダリングを完了し、レンダリングされた HTML ファイルを表示のためにクライアントに渡すことができます。従来のクライアントサイドレンダリング (CSR) と比較して、SSR レンダリングは、Web ページの最初の画面の読み込み速度、検索エンジンの最適化機能などを向上させることができます。この記事では、Vue フレームワークを介して SSR レンダリングを実装する方法を紹介します。

Vue プロジェクトの作成
まず、基本的な Vue プロジェクトを作成する必要があります。ターミナルで次のコマンドを実行します。

vue create my-ssr-app

ログイン後にコピー

このコマンドを使用すると、Vue 基本プロジェクトをすばやく作成し、コマンドを通じてプロジェクトディレクトリに入ることができます:

cd my-ssr-app

ログイン後にコピー

SSR の依存関係を追加する
次に、SSR 関連の依存関係を追加する必要があります。ターミナルに次のコマンドを入力します:

npm install --save vue vue-server-renderer express

ログイン後にコピー

vue: Vue フレームワーク自体の依存関係。
vue-server-renderer: Vue の SSR レンダラー。
express: Node.js に基づく Web アプリケーションフレームワーク。

上記のコマンドは、依存関係をプロジェクトの package.json ファイルに自動的にインストールします。

Vue エントリファイルを変更する
src ディレクトリに、main.js ファイルがあります。これは、 Vue フレームワーク。 SSR レンダリングをサポートするには変更を加える必要があります。まず、SSR 中にリクエストごとに新しいインスタンスを作成できるように、Vue インスタンスをファクトリ関数に変換する必要があります。元の

new Vue({
  render: h => h(App),
}).$mount('#app')

ログイン後にコピー

を

export function createApp() {
  return new Vue({
    render: h => h(App)
  })
}

ログイン後にコピー

に変更します。次に、createApp 関数をエクスポートする必要があります。これは、後でサーバースクリプトを作成するときに使用します。

サーバースクリプトの作成
プロジェクトのルートディレクトリで、サーバースクリプトを作成する必要があります。プロジェクトのルートディレクトリに server.js という名前のファイルを作成します。このファイルでは、関連する依存関係をインポートして、単純なサーバーを作成する必要があります。

const express = require('express')
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'))
const template = require('fs').readFileSync('./index.html', 'utf-8')

server.use('/dist', express.static('./dist'))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`))
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

ログイン後にコピー

このコードは、単純な Express サーバーを実装しており、./dist 静的ファイルを作成します。ディレクトリ内のファイルは /dist ルートの下で公開され、すべてのルートリクエスト (*) に対して、vue の createBundleRenderer メソッドを使用します。 ssr-server-bundle.json ファイルからサーバーバンドルを取得し、レンダリングされた HTML テキストを基本的な HTML テンプレートにマップし、最終結果をクライアントに返します。

サーバーを構築して起動します
ターミナルで次のコマンドを実行します:

npm run build
npm run serve

ログイン後にコピー

その中で、npm run build コマンドは、 src ディレクトリ内のコードはサーバーバンドルとクライアントバンドルに組み込まれ、構築された結果は dist ディレクトリに保存されます。 npm runserveコマンドはサーバーを起動し、ポート 3000 をリッスンします。ブラウザに http://localhost:3000 と入力して、SSR でレンダリングされたページにアクセスします。

これで、簡単な Vue SSR レンダリングの練習が完了しました。もちろん、SSR レンダリングには、深い理解と実践を必要とする特定の操作と詳細が多数ありますが、この記事では基本的な入門例のみを提供します。この記事が、皆さんが Vue SSR レンダリングをマスターするのに役立つことを願っています。

以上がVue の優れたプラクティス - SSR レンダリングを 0 から 1 に実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。