共计 1979 个字符，预计需要花费 5 分钟才能阅读完成。
什么是渲染
一般而言大家提到“渲染”，可能会说：“但凡从服务器返回的 HTML 页面，均算作是服务端渲染。”这可能让不少人还是感觉蛊惑，简略说渲染就是“数据”和“模板”拼接到一起。举个例子：咱们前端开发最常见的一个场景，申请后端接口数据，而后将数据通过模板绑定语法绑定到页面中，最终出现给用户。这个过程就是咱们这里所指的渲染。
总结来说，渲染实质其实是字符串的解析替换，实现形式有很多种。然而咱们这里要关注的并不是如何渲染，而是在哪里渲染的问题。
传统的服务端渲染
最晚期，Web 页面渲染都是在服务端实现的，即服务端运行过程中将所需的数据联合页面模板渲染为
HTML 响应给客户端浏览器。所以浏览器出现进去的是间接蕴含内容的页面。
这种形式对于没有玩过后端开发的同学来说可能会比拟生疏，所以上面通过咱们前端同学比拟相熟的 Node.js 来理解一下这种形式。
装置依赖：
// 创立 http 服务
npm i express
// 服务端模板引擎
npm i art-template express-art-template服务端代码局部，咱们能够在根本的 Web 服务，应用模板引擎，而后渲染一个页面，具体如下：’
const express = require('express')
const fs = require('fs')
const template = require('art-template')
const app = express()
app.get('/', (req, res) => {
// 1. 失去模板内容
const templateStr = fs.readFileSync('./index.html', 'utf-8')
// 2. 失去数据
const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
// 3. 渲染：数据 + 模板 = 残缺后果
const html = template.render(templateStr, data)
console.log(html)
// 4. 把渲染后果发送给客户端
res.send(html)
)}
app.listen(3000, () => console.log('running...'))客户端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>{{message}}</h1>
<ul>
{{each todos}}
<li>{{$value.title}}</li>
{{/each}}
</ul>
</body>
</html>这是最早的网页渲染形式，也是动静网站的外围工作步骤。
毛病：
- 前后端代码齐全耦合在一起，不利于开发和保护；
- 前端没有足够的施展空间；
- 服务端的压力较大；
- 用户体验个别；
然而不得不说，在网页利用并不简单的状况下，这种形式也是可取的。
客户端渲染
传统的服务端渲染的有很多问题，而这些问题客户端 Ajax 技术能够无效解决。Ajax 技术使得客户端动静获取数据变为可能，也就是说本来服务端渲染这件事也能够拿到客户端做了。
下图是基于客户端渲染的 SPA 利用的根本工作流程：
咱们以一个 Vue.js 创立的单页面利用为例，简略理解一下这种形式的渲染过程。
通过这个示例理解到咱们能够把【数据处理】和【页面渲染】这两件事离开了。由后端负责解决数据接口，而前端只负责将接口数据渲染到页面中，这让前端不再受限于后端，更为独立。
毛病：
- 首屏渲染慢
- 不利于 SEO
现代化服务端渲染
现代化服务器端个别会抉择同构渲染，也就是一份代码，在服务器端执行一次，用于实现服务器端渲染（首屏直出），而后在在客户端再执行一次，用于接管页面交互。简略来说，同构渲染就是“后端渲染”和“前端渲染”的联合，同构渲染同时领有传统服务端渲染和客户端渲染的长处，能够无效解决 SEO 和首屏渲染慢的外围问题。
- 客户端发动申请
- 服务端渲染首屏内容 + 生成客户端 SPA 相干资源
- 服务端将生成的首屏资源发送给客户端
- 客户端间接展现服务端渲染好的首屏内容
- 首屏中的 SPA 相干资源执行之后会激活客户端 Vue
- 之后客户端所有的交互都由客户端 SPA 解决
如何应用同构渲染
如何应用同构渲染有两种形式，一种是官网解决方案，一种是应用第三方的计划。
应用 Vue、React 等框架的官网解决方案：
- 长处：有利于了解原理
- 毛病：须要搭建环境比拟麻烦
应用第三方解决方案：
- React 生态中的 Next.js
- Vue 生态中的 Nuxt.js
- Angular 生态中的 Angular Universal
同构渲染利用的问题
同构渲染在利用上也存在以下问题：
- 开发条件无限
- 波及构建设置和部署的要求更高
- 更多的服务端负载
以上就是我对于服务端渲染的一些浅谈，心愿可能对大家有所帮忙。
举荐浏览
CSS 盒子的边距塌陷
热门剧本杀与 SaaS 的不解之缘