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

Wir müssen auch die Datei package.json ändern und den Befehl build in build:ssr ändern, um zu unterscheiden, wie SSR erstellt wird :

rrreee

Jetzt können wir den folgenden Befehl ausführen, um den SSR-Server zu erstellen und zu starten:

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

🎜Bei SSR-Anwendungen ist zu beachten, dass einige APIs, die nur in Browsern verfügbar sind, wie z. B. window und Dokument. Um dieses Problem zu lösen, stellt uns Vue 3 einige spezielle Hook-Funktionen zur Verfügung. 🎜Zuerst müssen wir die Funktion createApp in der Eintragsdatei definieren, wie unten gezeigt: 🎜rrreee🎜Dann verwenden wir beim serverseitigen Rendern die Methode renderToString, um Rendern Sie die Vue-Anwendung wie unten gezeigt: 🎜rrreee🎜 Die Funktion createSSRApp wird zum Erstellen einer Anwendungsinstanz auf dem Server verwendet, und die Methode renderToString wird zum Rendern der Anwendung verwendet Instanz in einen String. 🎜🎜Mit den oben genannten Konfigurations- und Codebeispielen haben wir die SSR-Technologie erfolgreich in Vue 3 angewendet. SSR kann nicht nur den SEO-Effekt der Anwendung verbessern, sondern auch dafür sorgen, dass unsere Anwendung den Benutzern schneller angezeigt wird. 🎜🎜Zusammenfassung: 🎜Dieser Artikel stellt die Anwendungspraxis der SSR-Technologie in Vue 3 vor und bietet relevante Codebeispiele. Durch den Einsatz von SSR können wir die SEO-Probleme von SPA-Anwendungen lösen und die Crawling- und Ranking-Effekte von Suchmaschinen verbessern. Die SSR-Funktion von Vue 3 bietet bessere Tools und Unterstützung für Front-End-Entwickler und hilft uns, Anwendungen zu erstellen, die zuverlässiger und optimierter sind und bessere SEO-Effekte haben. Angesichts der rasanten Entwicklung von SPA-Anwendungen ist SSR eine Technologie, die es wert ist, erkundet und ausprobiert zu werden, sowohl im Hinblick auf die Benutzererfahrung als auch auf die Suchmaschinenoptimierung. 🎜

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!