SSR和CSR的区别

SSR和CSR的区别

SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

简而言之，就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别。

两者有何不同

服务器端渲染的优势在于首屏渲染速度块，简单来讲它不需要来回多次往返于客户端和服务端。但是其性能等众多因素会影响用户体验，比如说：网速，在线活跃人数，服务器的物理位置等等。而客户端渲染则和服务端渲染相反，因为多次和服务器的交互导致首屏加载速度慢。但一旦这些请求完成之后，用户和页面之间的交互时用户体验就会好很多。

简而言之，SSR强在首屏渲染。而CSR强在用户和页面多交互的场景。

SSR服务器渲染demo：

// node 服务
// 0. 加载依赖
const express = require('express')
const Vue = require('vue')

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

// 渲染器渲染page得到html内容
// 1. page
const page = new Vue({
    template: '<div>hello, ssr</div>'
})

// 2. 传递接口
app.get('/', async(req, res) => {
    try {
        const html = await renderer.renderToString(page)
        res.send(html)
    } catch (error) {
        res.status(500).send('server inner error')
    }
})

// 3. 启动监听服务
app.listen(3000, () => {
    console.log('server start')
})