Vue 3中的SSR技术应用实践，提升应用的SEO效果
1. 什么是SSR?
在介绍Vue 3中的SSR技术应用实践前，我们先来了解下什么是SSR。
简单来说，SSR（Server Side Rendering），中文翻译为服务器端渲染，是指将Vue应用在服务端渲染成HTML字符串，然后将其直接返回到浏览器端，浏览器端直接展示，相比于传统SPA（Single Page Application，单页应用程序）仅渲染视图，而数据需要通过API请求动态获取的方式呈现，SSR渲染直接返回html字符串节省了浏览器端仅展示视图耗费的时间。因此，在用户体验和SEO优化方面有很大的优势。
2. Vue 3中的SSR
Vue 3相较于Vue 2有很多的新特性，其中SSR技术在Vue 3中得到了极大地增强。Vue 3中提供了一个新的API createSSRApp，用于创建一个与普通web应用程序相似的应用程序，但使用了服务器端渲染(SSR)来提供更好的SEO、性能和更多的交互机会。这使得SSR已经不再被看作是一个很新的概念，而是被认为是web应用程序的一个重要组成部分。
2.1. 创建Vue 3 SSR应用
要在Vue 3中创建一个SSR应用程序，需要使用createSSRApp API。下面是一个简单的示例，用于创建一个简单的SSR应用程序：
// main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return { app }
}
这个示例导入了createSSRApp和App组件并导出了createApp函数。createApp函数创建了一个app实例并返回。
2.2. Vue Server Renderer
为了将Vue应用程序渲染为HTML字符串，需要使用一个叫做Vue Server Renderer的包。Vue Server Renderer是Vue.js官方提供的一种将Vue组件渲染为HTML字符串的工具，它使用VNode (Virtual DOM 的一个子集)来渲染组件。
// server.js
import { createApp } from './main'
import { renderToString } from '@vue/server-renderer'
const { app } = createApp()
const html = await renderToString(app)
console.log(html)
上面的代码中，我们导入了createApp函数和renderToString方法。然后，我们通过调用createApp函数创建了app实例，并将其传递到renderToString方法中。renderToString方法将应用程序实例渲染为字符串。
2.3. Vue 3 SSR的优势
Vue.js 3中的SSR可以提供一些真正的优势，像这些:
-更好的SEO，因为搜索引擎可以看到渲染后的HTML代码。
-更好的性能，因为在用户到达页面之前，服务器就已经渲染了页面，
-更多的交互机会，因为渲染后的页面已经有了完整的HTML和CSS，用户可以立即与它交互而不需要等待加载其他资源。
3. Vue 3 SSR应用的配置
为了实现SSR，需要对Vue 3应用程序进行一些配置。下面我们将介绍几个主要的配置选项。
3.1. Webpack配置
要将Vue 3应用程序构建为SSR应用程序，需要对Webpack配置进行一些调整。
首先，需要使用webpack-node-externals插件来排除服务器端代码中已经包含的包。这个插件将从webpack的externals配置中排除node_modules中的所有模块，这些模块将被视为node模块。这个插件可以让Webpack在构建时忽略这些包，从而提高构建速度。
此外，需要在webpack配置文件中使用vue-loader插件。
Vue-loader是一个用于Webpack的插件，可以将Vue组件转换为JavaScript模块。在webpack配置中包括该插件。
这里提供一个简单的webpack.config.js文件示例：
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const nodeExternals = require('webpack-node-externals')
module.exports = {
target: 'node',
entry: './src/server.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'server.js'
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// ... other rules
]
},
plugins: [
new VueLoaderPlugin()
]
}
3.2. 服务器端路由配置
在SSR应用程序中，所有路由应该是服务器端路由，因此需要将服务器端路由添加到应用程序中。
// server.js
import express from 'express'
import { createApp } from './main'
import { renderToString } from '@vue/server-renderer'
const app = express()
app.get('*', async (req, res) => {
const { app } = createApp()
const html = await renderToString(app)
res.send(`
Vue 3 SSR App
${html}
`)
})
app.listen(3000, () => {
console.log('Server started at http://localhost:3000')
})
在服务器端代码中，我们使用express来创建服务器并添加一个通配符路由*。当用户访问任何路由时，我们都会创建一个app实例并将其传递到renderToString方法中。然后，我们将渲染后的HTML字符串作为响应发送回浏览器。
3.3. 服务端数据预取
服务端数据预取是一个重要的概念，可以用于在服务器端获取数据以用于渲染组件。在Vue.js 3中，可以通过设置asyncData、fetch或onServerPrefetch方法来执行服务端数据预取。
// App.vue
import { ref, onBeforeMount, onServerPrefetch } from 'vue'
export default {
setup() {
const posts = ref([])
onBeforeMount(async () => {
// This code will be called on client and server-side
await fetchPosts()
})
onServerPrefetch(async () => {
// This code will only be called on the server-side
await fetchPosts()
})
async function fetchPosts() {
const response = await fetch('/api/posts')
posts.value = await response.json()
}
return { posts }
}
}
在上面的代码中，我们使用onServerPrefetch方法来执行服务端数据预取，fetchPosts函数则用于获取/posts路由返回的JSON数据。
4. SSR的SEO优化
在Vue 3中使用SSR可以帮助我们优化SEO，因为服务器端渲染后的HTML代码可以被搜索引擎轻松地抓取和分析。但是，仅渲染HTML字符串并不能完全解决SEO问题。这里有一些常见的SEO错误，需要注意一下。
-首先，由于SSR只是一种技术，因此需要一些其他的SEO工具或技术来确保网站获得更好的排名。
-在渲染HTML时，我们应该确保避免使用JavaScript和CSS内联样式。搜索引擎最终还是会采用页面中的内容作为排名因素。
-确保每个页面的标题和元描述标签包含有关页面内容的信息。这可以帮助搜索引擎理解页面的主题，并使其更有可能排名。
-使用有意义的URL和页面名称。一些搜索引擎的爬虫会根据URL中的信息来理解页面内容。
结论
Vue 3中的SSR技术可以在保持传统SPA的交互性能的同时提高SEO，为网站的搜索引擎收录做出贡献。为了实现SSR，需要对Vue 3应用程序进行一些配置。我们可以使用createSSRApp-API创建SSR应用程序，并使用Vue Server Renderer将Vue组件渲染为HTML字符串。除此之外，我们还可以执行服务端数据预取以优化SEO。