Vue でサーバーサイドレンダリングを行うにはどうすればよいですか?-Vue.js-php.cn

Vue は、ユーザーインターフェイスを簡単に構築するためのツールとコンポーネントを提供する人気のある JavaScript フレームワークです。 Web アプリケーションがより複雑になるにつれて、サーバーサイドレンダリング (SSR) はより優れたパフォーマンスとユーザーエクスペリエンスを提供できます。 Vue 2.0 では SSR サポートが導入され、SSR に Vue を使用できるようになりました。この記事では、Vue でサーバーサイドレンダリングを行う方法について説明します。

サーバーサイドレンダリングとは何ですか?

典型的なクライアント側レンダリングアプリケーションでは、ブラウザは HTML ページと JavaScript ファイルを読み込みます。ユーザーがアプリケーションを操作すると、JavaScript はサーバーにリクエストを送信し、データを取得し、ページを更新します。このアプローチは優れたユーザーエクスペリエンスを提供しますが、いくつかの欠点ももたらす可能性があります。まず、検索エンジンクローラーは通常、JavaScript を実行しないため、アプリケーションのすべてのページを含めることができない可能性があります。次に、ブラウザはインターフェイスのレンダリングを開始する前に JavaScript がダウンロードされて実行されるまで待機する必要があるため、初期読み込み時間が遅くなる可能性があります。

サーバー側レンダリングはこれらの問題を解決します。 SSR では、サーバーはページをレンダリングするときに HTML と JavaScript を一緒にブラウザーに送信します。これは、検索エンジンがサイトを簡単にクロールできるようになり、ブラウザーがレンダリングを開始する前に JavaScript のダウンロードを待つ必要がないため、最初のページの読み込み時間が短縮されることを意味します。さらに、SSR は、強力な JavaScript エンジンを備えていないことが多いローエンドデバイスでのアプリケーションのパフォーマンスを向上させることができます。

なぜ Vue で SSR を使用するのですか?

Vue はクライアント側のレンダリングフレームワークです。仮想 DOM と非同期コンポーネントを使用して、非常に高速なページ応答時間を提供します。ただし、アプリケーションがより複雑になるにつれて、クライアント側のレンダリングにはいくつかの欠点が生じます。例:

初期ロード時間が長い: ブラウザは JavaScript ファイルをダウンロードして実行する必要があるため、アプリケーションの初期ロード時間が長くなる可能性があります。
制限付き SEO サポート: 検索エンジンは通常 JavaScript を実行しないため、すべてのページをインデックスに登録できない可能性があります。
ローエンドデバイスには適していません: 一部のローエンドデバイスでは、大量の JavaScript を処理できない場合があり、アプリが遅くなったり、クラッシュしたりすることがあります。
クローラーにとって難しい: 検索エンジンは JavaScript を実行できないため、クローラーにページのインデックスを正しく作成できない可能性があります。

SSR は上記の問題を解決し、より優れたパフォーマンスとユーザーエクスペリエンスを提供します。したがって、Vue は SSR サポートを提供し、サーバー側で Vue アプリケーションをレンダリングできるようにします。

Vue で SSR を実行する手順

Vue で SSR を実行する手順は、次の手順に分かれています。

Vue アプリケーションインスタンスを作成します。
サーバー (Node.js) を作成および構成します。
Vue アプリケーションを処理できるようにサーバーを構成します。
ページのパスを処理するルートを作成します。
Vue アプリケーションをサーバーでレンダリングします。

次に、SSR をよりよく理解するために、各ステップを段階的に見てみましょう。

ステップ 1: Vue アプリケーションインスタンスを作成する

まず、Vue インスタンスを作成し、アプリケーションのテンプレートを定義する必要があります。クライアント側でレンダリングするときは、通常、index.html ファイルでアプリケーションのテンプレートを定義します。ただしSSRではサーバー側で作成する必要があります。簡単な例を次に示します。

// app.js
import Vue from 'vue';
import App from './App.vue';

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

ログイン後にコピー

上記のコードは、新しい Vue インスタンスを作成して返す createApp という名前の関数をエクスポートします。このインスタンスは、ルートコンポーネント App.vue を使用してアプリケーションをレンダリングします。

ステップ 2: サーバーの作成と構成

ステップ 1 では、Vue アプリケーションをサーバー側でレンダリングするために使用できる Vue インスタンスを作成しました。次に、このインスタンスを実行するサーバーを作成する必要があります。 Node.js を使用してサーバーを作成します。

使用できる基本的なサーバーテンプレートは次のとおりです:

// server.js
const express = require('express');
const app = express();

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

ログイン後にコピー

上記のコードは、単純な Express サーバーを作成し、ローカルポート 3000 でリッスンします。このサーバーは、express.static ミドルウェアを使用して静的ファイルアクセスのサポートを提供することもできます。

ステップ 3: Vue アプリケーションを処理するようにサーバーを構成する

サーバーを作成しました。次に、Vue アプリケーションを処理できるようにサーバーを構成する必要があります。このためには、vue-server-renderer 依存関係を使用する必要があります。以下は完全なコード例です:

// server.js
const express = require('express');
const app = express();

// Include the Vue SSR renderer.
const renderer = require('vue-server-renderer').createRenderer();

// Import the createApp function from app.js.
const { createApp } = require('./app');

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Handle all GET requests.
app.get('*', (req, res) => {
  // Create a new Vue app instance.
  const app = createApp();

  // Render the Vue app to a string.
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }

    // Send the HTML response to the client.
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vue SSR App</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

ログイン後にコピー

上記のコードは完全な Express サーバーを作成し、リクエストを Vue インスタンスに関連付け、vue-server-renderer パッケージを使用します。 メソッドは、Vue アプリケーションを HTML にレンダリングします。

ステップ 4: ルートを作成する

これで、Vue アプリケーションをサーバー側でレンダリングできるようになりました。ここで、ページのパスをサーバー側のルートに関連付けるルートを作成する必要があります。ルートの作成には Vue Router を使用します。

以下は簡単な例です:

// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h => h(App)
  });
}

ログイン後にコピー

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}

ログイン後にコピー

上面的代码分别在 app.js 和 router.js 文件中定义了我们的路由。在 app.js 文件中，我们创建了一个新的 Vue 实例并将路由器与其关联。在 router.js 文件中，我们使用 createRouter 函数来导出一个新的路由实例。

步骤5：在服务器中渲染我们的 Vue 应用程序

我们已经准备好工作了，现在需要在服务器中渲染我们的 Vue 应用程序。我们将使用步骤3中的代码，其中渲染器将 Vue 应用程序渲染为 HTML，最后将其发送回客户端。

现在让我们建立应用程序本身的代码。以下是我们简单的应用程序：

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

ログイン後にコピー

在上面的组件中，我们定义了一个带有文本消息的标题。我们还使用 Vue Router 将组件关联到应用程序路径。

最后，在服务器上启动我们的应用程序。使用以下命令：

node server.js

ログイン後にコピー

现在，在浏览器中导航到 http://localhost:3000 应该显示我们的 Vue 应用程序。客户端和服务器端路由都应该正常工作。

结论

在本文中，我们了解了服务器端渲染 (SSR) 的概念。我们还了解了在 Vue 中执行服务器端渲染的步骤。我们了解了为什么在 Vue 中使用 SSR 很重要，以及如何使用 Node.js 和 vue-server-renderer 执行服务器端渲染。现在，你应该能够为你的下一个 Vue 应用程序使用 SSR 来提供更好的性能和用户体验。

以上がVue でサーバーサイドレンダリングを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。