アプリケーションの SEO 効果を向上させるための Vue 3 での SSR テクノロジー適用実践

アプリケーションの SEO 効果を向上させるための Vue 3 での SSR テクノロジー アプリケーションの実践

フロントエンド開発の急速な発展に伴い、SPA (シングル ページ アプリケーション) はが主流になります。 SPA の利点は明白で、スムーズなユーザー エクスペリエンスを提供できますが、SEO (検索エンジン最適化) の観点からはいくつかの課題があります。 SPA はフロントエンドのレンダリング段階で HTML テンプレートのみを返すため、コンテンツのほとんどは JavaScript を通じて動的に読み込まれ、検索エンジンのクロール、インデックス作成、およびランキングが困難になります。この問題を解決するために、サーバーサイド レンダリング (SSR) テクノロジーが登場しました。

Vue 3 は、現在最も人気のある JavaScript フレームワークの 1 つとして、開発者に SSR サポートを提供します。 Vue 3 の SSR は、Vite および VitePress ツールを活用して JavaScript の同形レンダリングを実装し、サーバー側で応答を事前レンダリングし、クライアント側で操作できるようにします。この記事では、Vue 3 での SSR テクノロジーの適用方法を紹介し、SSR を使用してアプリケーションの SEO 効果を向上させる方法を示します。

まず、Vue 3 の SSR 機能をサポートするために Vue CLI 4 をインストールする必要があります。コマンドラインで次のコマンドを実行します:

npm install -g @vue/cli@4

次に、Vue CLI を使用してプロジェクトを作成します:

vue create vue-ssr-demo

[機能を手動で選択する] を選択し、[Babel] と [Vue を選択する] をチェックします。バージョン「 」の場合は「2.x」を選択し、プロジェクトの作成を続行します。

作成が完了したら、プロジェクト ディレクトリに入り、関連する依存関係をインストールします。

cd vue-ssr-demo
npm install vuex vue-router express

次に、ルートに server.js ファイルを作成する必要があります。起動 SSR サーバーとページ レンダリング用のディレクトリ:

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

// 读取生成的bundle文件
const bundle = require('./dist/vue-ssr-server-bundle.json')
const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./public/index.html', 'utf-8'),
  clientManifest: require('./dist/vue-ssr-client-manifest.json')
})

// 静态资源的路径
server.use(express.static('./dist'))

// 所有路由都交给Vue处理
server.get('*', (req, res) => {
  const context = { url: req.url }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    }

    res.end(html)
  })
})

// 启动服务器
server.listen(8080)
console.log('Server is running on http://localhost:8080')

また、package.json ファイルを変更し、build コマンドを build:ssr に変更する必要があります。 、SSR の構築方法を区別するには:

"scripts": {
  "build:ssr": "vue-cli-service build --target node --ssr"
}

ここで、次のコマンドを実行して SSR サーバーを構築して起動できます:

npm run build:ssr
node server.js

上記の手順が完了すると、正常に完了しました。 SSR Vue 3 アプリケーションを開始しました。

SSR アプリケーションでは、サーバー レンダリング中にブラウザ関連のコードが実行されないため、window などのブラウザでのみ利用可能な一部の API は使用できないことに注意してください。および ドキュメント 。この問題を解決するために、Vue 3 はいくつかの特別なフック関数を提供します。
まず、エントリ ファイルで createApp 関数を次のように定義する必要があります:

import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)
  app.use(router)
  app.use(store)

  return { app, router, store }
}

次に、サーバー側のレンダリング中に renderToString を使用します。メソッド Vue アプリケーションをレンダリングするには、次のようにします。

import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.isReady().then(() => {
      context.rendered = () => {
        context.state = store.state
      }
      resolve(app)
    }, reject)
  })
}

createSSRApp 関数を使用してサーバー上にアプリケーション インスタンスを作成し、renderToString メソッドを使用してアプリケーションをレンダリングします。インスタンスを文字列に変換します。

上記の構成とコード例を通じて、SSR テクノロジーを Vue 3 に適用することに成功しました。 SSR は、アプリケーションの SEO 効果を向上させるだけでなく、アプリケーションがユーザーに速く表示されるようにすることもできます。

概要:
この記事では、Vue 3 での SSR テクノロジの適用方法を紹介し、関連するコード例を示します。 SSR を使用することで、SPA アプリケーションの SEO 問題を解決し、検索エンジンのクローリング効果とランキング効果を向上させることができます。 Vue 3 の SSR 機能は、フロントエンド開発者により優れたツールとサポートを提供し、より信頼性が高く、最適化され、SEO 効果が優れたアプリケーションを構築するのに役立ちます。 SPA アプリケーションの急速な開発により、SSR は、ユーザー エクスペリエンスと検索エンジンの最適化の両方の観点から、検討し試す価値のあるテクノロジです。

以上がアプリケーションの SEO 効果を向上させるための Vue 3 での SSR テクノロジー適用実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。