Vue SSR 开发SEO动态网站快速入门（SSR精髓）

在当今数字化时代，技术人员越来越注重如何利用先进的技术和最佳实践来构建高性能的网站。本文将介绍如何利用 Vue 框架的 SSR（服务器端渲染）功能，结合 SEO 优化，打造具有竞争力的网站。

Vue SSR 的优势

Vue SSR 可以显著提高网站的性能和用户体验。通过在服务器端渲染页面，网站加载速度得以优化，并且在搜索引擎中更易于索引和排名。

数据预取与 SEO 优化

利用 Vue 的 preFetch 钩子，在服务器端预先获取数据，加速页面加载速度并提高 SEO 效果。利用Quasar 提供的Meta插件合理设置页面的标题、描述等元数据，有助于提高网站在搜索结果中的曝光度。

关键示例代码

vue 复制代码

<template>
  <q-page class="flex flex-center">
      <q-field prefix="这是服务端渲染出来的数据：" standout>
        <q-markup-table>
          <q-tr>
            <q-td>省份：{{ data.province }}</q-td>
          </q-tr>
          <q-tr>
            <q-td>城市：{{ data.city }}</q-td>
          </q-tr>
        </q-markup-table>
      </q-field>
  </q-page>
</template>

<script setup>
import {api} from "boot/axios";
import {useSsrStore} from "stores/ssr-store";
import {storeToRefs} from "pinia";
import {useMeta} from "quasar";
// 1. 数据预加载到 store 里
defineOptions({
  // 数据预加载， 开启SSR模式下，该函数只有在服务端或者客户端执行一次
  preFetch ({ redirect, ssrContext, store }){
    if (ssrContext) {
      // 服务端将数据预先加载到 ssrStore 中
      const ssrStore = useSsrStore(store)
      // 服务端使用异步方式，实现多个数据并发获取
      new Promise(async (resolve) => {
        const result = await api.get('/rest/position')
        console.log('在服务端获取的数据：', result.data)
        // 装入数据到store
        ssrStore.setData(result.data)
        resolve()
      })
      // 其它数据获取...
    }
  }
})

// 该 store 到这里已经有数据了
const ssrStore =  useSsrStore()
const { data } = storeToRefs(ssrStore)

// 2. 修改网页的标题，关键字等
const metaData = {
  title: 'quasar ssr 例子',
  meta: {
    description: {name: 'description', content: '这是seo的描述...'},
    keywords: {name: 'keywords', content: 'quasar ssr, vue ssr 开发'},
    // 其它配置，可查看官方
    // https://quasar.dev/quasar-plugins/meta#introduction
  }
}
useMeta(metaData)

</script>

效果图：

这是页面实现的例子效果

页面标题在服务端渲染完成了

数据在服务端渲染成html回来了

结语

Vue 技术广泛使用，但其在大型互联网开发中的应用相对较少。通过本文的学习，您可以掌握利用 Vue SSR 构建高性能、SEO 友好的网站的关键技巧。欢迎关注我，#Vue #SSR #SEO #独立开发 # Quasar，学习更多 SSR 相关的技巧，筹备下一系列精讲，让您更深入地了解 SSR 技术的应用与优势。

完整代码和操作过程已上传在github：

github.com/msjaver/ssr...