前端渲染、服务器端渲染、同构渲染_同构渲染和静态站点

一、引

很久前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但是前几年 jQuery、Angular、React、Vue 等 JS 框架的大行其道，大家转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，好像还是前端渲染的天下。同构到底是不是未来？自己的项目该如何选型？我想不应该只停留在追求热门和拘泥于固定模式上，忽略了前后端渲染之“争”的“核心点”，关注如何提升“用户体验”。

二、概念

1. 「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；
2. 「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；
3. 「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

2.1 前端渲染的优势

1. 局部刷新。无需每次都进行完整页面请求
2. 懒加载。如在页面初始时只加载可视区域内的数据，滚动后 rp 加载其它数据，可以通过 react-lazyload 实现
3. 富交互。使用 JS 实现各种酷炫效果
4. 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
5. 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
6. JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

2.2 后端渲染的优势