Vue 3中的SSR技术应用实践，提升应用的SEO效果

百变鹏仔 3周前 (09-25) #VUE

文章标签效果

随着前端开发的快速发展，SPA（单页面应用）已经成为了主流。SPA的好处不言而喻，可以提供流畅的用户体验，但却在SEO（搜索引擎优化）方面有一些挑战。由于SPA在前端渲染阶段只返回一个HTML模板，大部分内容是通过JavaScript动态加载的，导致搜索引擎在抓取、索引和排名方面的困难。为了解决这个问题，服务端渲染（SSR）技术应运而生。

Vue 3作为目前最受欢迎的JavaScript框架之一，为开发者提供了SSR的支持。Vue 3的SSR利用Vite和VitePress工具实现了JavaScript的同构渲染，允许在服务器端预先渲染响应，并在客户端上进行交互。本文将介绍Vue 3中SSR技术的应用实践，并展示如何使用SSR提升应用的SEO效果。

首先，我们需要安装Vue CLI 4以支持Vue 3的SSR功能。在命令行中执行以下命令：

立即学习“前端免费学习笔记（深入）”；

npm install -g @vue/cli@4

接下来，我们使用Vue CLI创建一个项目：

vue create vue-ssr-demo

选择"Manually select features"，然后选中"Babel"和"Choose Vue version"，选择"2.x"，继续创建项目。

创建完成后，我们进入项目目录并安装相关依赖：

cd vue-ssr-demonpm 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:ssrnode 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函数用于在服务器上创建应用实例，renderToString方法用于将应用实例渲染成字符串。

通过以上的配置和代码示例，我们成功应用了Vue 3中的SSR技术。SSR不仅可以提升应用的SEO效果，还能使我们的应用更快地呈现给用户。

总结：
本文介绍了Vue 3中的SSR技术应用实践，并提供了相关的代码示例。通过使用SSR，我们可以解决SPA应用在SEO方面的问题，提升搜索引擎的抓取和排名效果。Vue 3的SSR功能为前端开发者提供了更好的工具和支持，帮助我们构建更可靠、优化和具备较好SEO效果的应用。随着SPA应用的迅速发展，无论是在用户体验还是搜索引擎优化方面，SSR都是一个值得探索和尝试的技术。

文章推荐

Vue 3中的SSR技术应用实践，提升应用的SEO效果

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器