学习Vue的SSR，这可能是最好的教程_vue ssr coomputed-优快云博客

本文链接：https://blog.youkuaiyun.com/Ancecis/article/details/106984386

本文详细介绍了Vue.js的Server Side Render（SSR）使用，包括SSR的上手，从服务端到浏览器的完整流程，以及SSR与Client Side Render（CSR）的区别。重点讨论了SSR过程中如何保证状态一致性，以及SSR内部实现的关键点，如隔离机制、编译优化和渲染层的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了追求更好的用户体验，很多公司的业务页面都会采用SSR进行渲染，将渲染的结果返回给浏览器，浏览器能够不经过实例化Vue，直接解析HTML代码展示，这样可以减少首屏时间，提高用户体验。

0.Server Side Render使用

0.1上手SSR

Vue提供一个npm包叫做vue-server-renderer，它是在vue源码中的server目录中单独打包出来作为服务端渲染的依赖包，包的名称已经讲清楚了它的作用：作为一个服务端渲染器，将Vue实例中所有需要展示的内容进行渲染。

举一个很简单的服务端渲染例子：

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (req, res) => {
   
   
    // 实例化一个Vue
    const app = new Vue({
   
   
        template: `<div>Server Render</div>`,
    })
  // 将vue实例进行渲染生成html，并且拼凑为HTML代码返回
  renderer.renderToString(app, (err, html) => {
   
   
    if (err) {
   
   
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${
     
     html}</body>
      </html>
    `)
  })
})

server.listen(8080)

使用renderer在普通实例上面进行渲染成为一个字符串并且返回。

ssr就这么简单？肯定不是。

要知道在Server环境下，一个服务会接收很多请求。那么上面例子会导致很多请求都共享一个Vue实例。现在的程序比较复杂，需要借用到store来进行保存状态：

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer();
const store = new Vuex.Store({
   
   
    state: {
   
   
        count: 1
    },
    mutations: {
   
   
        increment(state) {
   
   
            state.count++;
        }
    }
})

server.get('*',