サーバーサイドのレンダリングと SEO の最適化に Vue を使用する方法

サーバーサイド レンダリングと SEO 最適化に Vue を使用する方法

はじめに:
フロントエンドとバックエンドの分離がますます一般的になりつつある中、人気の JavaScript フレームワークとして Vue が使用されています。 、フロントエンド開発で広く使用されています。ただし、Vue のデフォルトのアプローチはクライアント側レンダリングであるため、SEO (検索エンジン最適化) 関連の問題が発生する可能性があります。これらの問題を解決するために、Vue はサーバーサイド レンダリング (SSR) の概念を導入しました。この記事では、Vue をサーバーサイド レンダリングと SEO 最適化に使用する方法を詳しく紹介します。

1. サーバーサイド レンダリング (SSR) の概念と利点

1. サーバーサイド レンダリングとは何ですか?
   サーバー サイド レンダリング (SSR) とは、空の HTML ファイルを返してクライアントを通じて動的にレンダリングするのではなく、Vue アプリケーションの HTML 文字列をサーバー側で直接レンダリングしてクライアントに返すことを指します。コンテンツ。
2. サーバー側レンダリングの利点
3. 検索エンジン クロールのサポート: 検索エンジン クローラーは主に HTML コンテンツに基づいて解析するため、サーバー側レンダリングを通じて完全な HTML ページを検索エンジンに返すことができます。 . SEO の最適化に役立ちます。
4. 最初の画面の読み込み時間を短縮する: サーバー側のレンダリングはレンダリングされたページを直接返すため、ユーザーは最終コンテンツが読み込まれるまで待つだけで済み、最初の画面の読み込み時間が大幅に短縮されます。
5. パフォーマンスの向上: フロントエンドとバックエンド間で送信されるデータの数とサイズを削減することで、サーバー側のレンダリングによってページの全体的な応答速度が向上し、ユーザー エクスペリエンスが向上します。

2. サーバー側レンダリングに Vue を使用する手順

1. Vue プロジェクトの作成
   まず、Vue プロジェクトを作成します。 Vue CLI。

vue create ssr-app
cd ssr-app

2. サーバー側レンダリング サポートの追加
   プロジェクトのルート ディレクトリに、vue-server-renderer パッケージをインストールし、サーバー ファイルを作成します。

npm install vue-server-renderer
mkdir server
touch server/index.js

サーバー ファイル server/index.js に必要なモジュールを導入し、Express サーバーを作成します。

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const server = express();

3. サーバー側レンダリングの構成
   次に、サーバー側レンダリングのパラメーターを構成する必要があります。まず、Vue インスタンスとプロジェクト エントリ ファイル、およびレンダラー関数をインポートする必要があります。

const fs = require('fs');
const path = require('path');
const serverBundle = require('../dist/server-bundle.json');
const clientManifest = require('../dist/client-manifest.json');
const template = fs.readFileSync(path.resolve(__dirname, '../public/index.html'), 'utf-8');
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推荐
  template, // （可选）页面模板
  clientManifest // （可选）客户端构建 manifest
});

4. ルーティング リクエストの処理
   サーバー側レンダリングを使用する鍵は、ルーティング リクエストを処理し、レンダリング結果をクライアントに返すことです。サーバー ファイルでは、ルートと対応するハンドラーを定義する必要があります。

server.get('*', (req, res) => {
  const context = { url: req.url };
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
    } else {
      res.end(html);
    }
  });
});

5. サーバーの起動
   最後に、リクエストをリッスンするためにサーバーを起動する必要があります。

server.listen(3000, () => {
  console.log('Server running');
});

3. SEO の最適化

1. 基本的な SEO の最適化
   サーバーサイド レンダリングの使用に基づいて、さらに最適化するために追加の措置を講じることもできます。 SEO効果です。
2. メタ タグを適切に設定する: 説明、タイトル、その他のメタ情報を含むメタ タグをページに追加すると、検索エンジンが Web ページのコンテンツをよりよく理解できるようになります。
3. わかりやすい URL を作成する: 検索エンジンとユーザーがページのコンテンツをよりよく理解できるように、意味のある URL 構造を使用し、キーワードや説明的な単語の使用に注意してください。
4. プリレンダリング テクノロジの使用
   プリレンダリングとは、ビルド プロセス中に静的ページを事前レンダリングし、サーバーに保存することを指します。この方法では、サーバーの計算能力を使用して静的ページを生成し、アクセス時にそれらをクライアントに直接返すため、最初の画面の読み込み速度が向上します。

Vue プロジェクトの vue.config.js ファイルに、次の構成を追加します。

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      prerender: true // 启用预渲染
    }
  }
}

When running npm run build , Vue の構築プロセスでは、自動的に事前レンダリングが行われ、事前レンダリングされたページがサーバーに保存されます。

結論:
サーバーサイドレンダリングに Vue を使用し、一連の SEO 最適化措置を講じることにより、より優れた SEO 効果を達成し、検索エンジンでの Web サイトのランキングを向上させることができ、さらにユーザー エクスペリエンスも向上させることができます。この記事がフロントエンド開発者に役立ち、プロジェクトに適用されることを願っています。

以上がサーバーサイドのレンダリングと SEO の最適化に Vue を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。