服务端渲染原理，与客户端渲染区别

什么是服务端渲染？

我们可以用node直接起一个express服务。

var express = require('express')
var app = express()

app.get('/', (req, res) => {
 res.send(
 `
   
     
       
     
     
       
hello
       
world
     
   
 `
 )
})

app.listen(3001, () => {
 console.log('listen:3001')
})

启动之后打开localhost:3001可以看到页面显示了hello world。而且打开网页源代码：

也能够完成显示。
这就是服务端渲染。其实非常好理解，就是服务器返回一堆html字符串，然后让浏览器显示。

什么是客户端渲染?

与服务端渲染相对的是客户端渲染(Client Side Render)。现在创建一个新的React项目，用脚手架生成项目，然后run起来。 这里你可以看到React脚手架自动生成的首页。

然而打开网页源代码，如下：

body中除了兼容处理的noscript标签之外，只有一个id为root的标签。那首页的内容是从哪来的呢？很明显，是下面的script中拉取的JS代码控制的。

SSR vs CSR

CSR和SSR最大的区别在于前者的页面渲染是JS负责进行的，而后者是服务器端直接返回HTML让浏览器直接渲染。

传统CSR的弊端：

• 由于页面显示过程要进行JS文件拉取和React代码执行，首屏加载时间会比较慢。
• 对于SEO(Search Engine Optimazition,即搜索引擎优化)，完全无能为力，因为搜索引擎爬虫只认识html结构的内容，而不能识别JS代码内容。

SSR的出现，就是为了解决这些传统CSR的弊端。

SSR vs CSR