服务端渲染原理，与客户端渲染区别
2019-07-08 本文已影响0人
江南之城
什么是服务端渲染？
我们可以用node直接起一个express服务。
var express = require('express')
var app = express()
app.get('/', (req, res) => {
res.send(
`
<html>
<head>
<title>hello</title>
</head>
<body>
<h1>hello</h1>
<p>world</p>
</body>
</html>
`
)
})
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
