Vue 3 和服务器端渲染（SSR）

本文将介绍 Vue 3 及其在服务器端渲染（SSR）方面的应用，通过代码示例展示如何实现 SSR，提高网站性能和 SEO 效果。

一、Vue 3 与 SSR

Vue 3 带来了许多改进，其中之一就是更好地支持服务器端渲染（SSR）。SSR 能够在不牺牲性能的前提下，提高网站的搜索引擎优化（SEO）效果，并减少内容到达时间（time-to-content）。

二、实现 SSR

要在 Vue 3 中实现 SSR，我们可以使用 `vue-server-renderer` 库。以下是一个简单的示例：

1. 安装依赖：

npm install --save vue-server-renderer

2. 创建一个简单的 Vue 3 应用：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 注册一个简单的组件
app.component('HelloWorld', {
  template: '<div>Hello, World!</div>'
})

// 启动服务器
const server = require('http').createServer()

app.use(async (req, res) => {
  // 渲染 Vue 组件
  const { renderToString } = require('vue-server-renderer')
  const html = await renderToS