Pratique d'application de la technologie SSR dans Vue 3 pour améliorer l'effet SEO de l'application

Pratique d'application de la technologie SSR dans Vue 3 pour améliorer l'effet SEO de l'application

Avec le développement rapide du développement front-end, SPA (Single Page Application) est devenu courant. Les avantages du SPA sont évidents et peuvent offrir une expérience utilisateur fluide, mais il existe certains défis en termes de référencement (optimisation des moteurs de recherche). Étant donné que SPA ne renvoie qu'un modèle HTML lors de l'étape de rendu frontal, la plupart du contenu est chargé dynamiquement via JavaScript, ce qui entraîne des difficultés pour les moteurs de recherche lors de l'exploration, de l'indexation et du classement. Afin de résoudre ce problème, la technologie de rendu côté serveur (SSR) a vu le jour.

Vue 3, en tant que l'un des frameworks JavaScript les plus populaires à l'heure actuelle, offre aux développeurs un support SSR. SSR pour Vue 3 exploite les outils Vite et VitePress pour implémenter le rendu isomorphe de JavaScript, permettant aux réponses d'être pré-rendues côté serveur et d'interagir avec celles-ci côté client. Cet article présentera la pratique d'application de la technologie SSR dans Vue 3 et montrera comment utiliser SSR pour améliorer l'effet SEO de l'application.

Tout d'abord, nous devons installer Vue CLI 4 pour prendre en charge la fonction SSR de Vue 3. Exécutez la commande suivante dans la ligne de commande :

npm install -g @vue/cli@4

Ensuite, nous créons un projet à l'aide de Vue CLI :

vue create vue-ssr-demo

Sélectionnez "Sélectionner manuellement les fonctionnalités", puis cochez "Babel" et "Choisir la version de Vue", sélectionnez "2.x " , continuez à créer le projet.

Après la création, nous entrons dans le répertoire du projet et installons les dépendances pertinentes :

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

Ensuite, nous devons créer un fichier server.js dans le répertoire racine pour démarrer le serveur SSR et afficher la page : 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

Nous devons également modifier le fichier package.json et changer la commande build en build:ssr pour distinguer comment SSR est construit :

rrreee

Maintenant, nous pouvons exécuter la commande suivante pour créer et démarrer le serveur SSR :

rrreee
Une fois les étapes ci-dessus terminées, nous avons démarré avec succès une application SSR Vue 3.

🎜Dans les applications SSR, une chose à noter est que, comme aucun code lié au navigateur ne sera exécuté lors du rendu du serveur, certaines API uniquement disponibles dans les navigateurs ne peuvent pas être utilisées, telles que window et document. Pour résoudre ce problème, Vue 3 nous fournit des fonctions de hook spéciales. 🎜Tout d'abord, nous devons définir la fonction createApp dans le fichier d'entrée, comme indiqué ci-dessous : 🎜rrreee🎜Ensuite, lors du rendu côté serveur, nous utilisons la méthode renderToString pour rendre l'application Vue, comme indiqué ci-dessous : 🎜rrreee🎜 La fonction createSSRApp est utilisée pour créer une instance d'application sur le serveur, et la méthode renderToString est utilisée pour rendre l'application instance dans une chaîne. 🎜🎜Avec la configuration et les exemples de code ci-dessus, nous avons appliqué avec succès la technologie SSR dans Vue 3. SSR peut non seulement améliorer l'effet SEO de l'application, mais également permettre à notre application d'apparaître plus rapidement aux utilisateurs. 🎜🎜Résumé : 🎜Cet article présente la pratique d'application de la technologie SSR dans Vue 3 et fournit des exemples de code pertinents. En utilisant SSR, nous pouvons résoudre les problèmes de référencement des applications SPA et améliorer les effets d'exploration et de classement des moteurs de recherche. La fonction SSR de Vue 3 fournit de meilleurs outils et une meilleure prise en charge aux développeurs front-end, nous aidant à créer des applications plus fiables, optimisées et ayant de meilleurs effets SEO. Avec le développement rapide des applications SPA, SSR est une technologie qui mérite d'être explorée et essayée, tant en termes d'expérience utilisateur que d'optimisation des moteurs de recherche. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!