Anwendungspraxis der SSR-Technologie in Vue 3 zur Verbesserung des SEO-Effekts der Anwendung

Anwendungspraxis der SSR-Technologie in Vue 3 zur Verbesserung des SEO-Effekts der Anwendung

Mit der rasanten Entwicklung der Front-End-Entwicklung ist SPA (Single Page Application) zum Mainstream geworden. Die Vorteile von SPA liegen auf der Hand und können für ein reibungsloses Benutzererlebnis sorgen, es gibt jedoch einige Herausforderungen im Hinblick auf SEO (Suchmaschinenoptimierung). Da SPA in der Front-End-Rendering-Phase nur eine HTML-Vorlage zurückgibt, werden die meisten Inhalte dynamisch über JavaScript geladen, was dazu führt, dass Suchmaschinen Schwierigkeiten beim Crawlen, Indexieren und Ranking haben. Um dieses Problem zu lösen, wurde die Server-Side-Rendering-Technologie (SSR) entwickelt.

Vue 3, als eines der derzeit beliebtesten JavaScript-Frameworks, bietet Entwicklern SSR-Unterstützung. SSR für Vue 3 nutzt die Tools Vite und VitePress, um isomorphes Rendering von JavaScript zu implementieren, sodass Antworten auf der Serverseite vorgerendert und auf der Clientseite interagiert werden können. In diesem Artikel wird die Anwendungspraxis der SSR-Technologie in Vue 3 vorgestellt und gezeigt, wie SSR verwendet werden kann, um den SEO-Effekt der Anwendung zu verbessern.

Zuerst müssen wir Vue CLI 4 installieren, um die SSR-Funktion von Vue 3 zu unterstützen. Führen Sie den folgenden Befehl in der Befehlszeile aus:

npm install -g @vue/cli@4

Als Nächstes erstellen wir ein Projekt mit der Vue-CLI:

vue create vue-ssr-demo

Wählen Sie „Funktionen manuell auswählen“, aktivieren Sie dann „Babel“ und „Vue-Version auswählen“ und wählen Sie „2.x " , fahren Sie mit der Erstellung des Projekts fort.

Nach der Erstellung geben wir das Projektverzeichnis ein und installieren die relevanten Abhängigkeiten:

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

Dann müssen wir eine server.js-Datei im Stammverzeichnis erstellen, um den SSR-Server zu starten und die Seite zu rendern : 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应用中，有一点需要注意的是，由于在服务器渲染期间不会执行任何浏览器相关的代码，因此不能使用一些只在浏览器可用的API，如window和document。为了解决这个问题，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函数用于在服务器上创建应用实例，renderToStringrrreee

rrreee

rrreee
Nachdem die oben genannten Schritte abgeschlossen sind, haben wir erfolgreich eine SSR Vue 3-Anwendung gestartet.

Das obige ist der detaillierte Inhalt vonAnwendungspraxis der SSR-Technologie in Vue 3 zur Verbesserung des SEO-Effekts der Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!