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

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

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

vue create my-ssr-app

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

cd my-ssr-app

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

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

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

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

3. 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 関数をエクスポートする必要があります。これは、後でサーバー スクリプトを作成するときに使用します。

4. サーバー スクリプトの作成
   プロジェクトのルート ディレクトリで、サーバー スクリプトを作成する必要があります。プロジェクトのルート ディレクトリに 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 テンプレートにマップし、最終結果をクライアントに返します。

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

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 サイトの他の関連記事を参照してください。