[原文]segmentfault.com/a/1190000016704384
一、后端模板渲染
好处：
- 前端能快速呈现服务器端渲染好的页面，而不用等客户端渲染，提供很好的用户体验
- SEO友好
不足：
- 前后端杂揉在一起，不方便本地开发、本地模拟调试，也不方便自动化测试
- 前端被约束在后端开发的模式中，不能充分使用前端的构建生态，开发效率低下
- 项目难以管理和维护，也可能会有前后端职责不清的问题
二、客户端渲染（随着前端工程化、前后端分离、前端组件化技术发展）
好处：
- 前端独立出来，可以充分使用前端生态的强大功能
- 更好的管理代码，更有效率的开发、调试、测试
- 前后端代码解耦之后，能更好的扩展、重构
不足：
- 首屏加载缓慢，因为要等Javascript脚本加载完毕后，才能进行渲染
- SEO不友好，因为HTML中几乎没有可用的信息
场景：
不需要首屏快速加载、SEO 友好的，用全客户端渲染
三、node中间层渲染
好处：
扫描二维码关注公众号，回复：
6154710 查看本文章
- 保留后端模板渲染、首屏快速响应、SEO 友好
- 保留前端后分离（只是首屏由服务器端渲染、其他都由客户端渲染）
不足：
- 增加了一个中间层，应用性能有所降低
- 增加了架构的复杂度、不稳定性，降低应用的安全性
- 对开发人员要求高了很多
场景：
- 如果技术团队不支持，不建议在需要首屏快速加载、SEO 友好的地方使用如 React、 vue等组件化技术。
- 如果使用了React、vue等组件化技术，一般就使用其对应提供的ssr。
四、服务器端渲染ssr（一般特指在node中间层基础上加上前端组件化技术在服务器端的渲染）
说明：
react、vue、angular 等框架的出现，让前端组件化技术深入人心，但在一些需要首屏快速加载与 SEO 友好的页面就陷入了两难的境地了。因为前端组件化技术天生就是给客户端渲染用的，而在服务器端需要被渲染成HTML文本，这确实不是一件很容易的事，所以服务器端渲染（ssr）就是为了解决这个问题——让前端组件化能够在服务器端渲染，如next.js、nuxt.js、razzle、react-server、beidou等。以next.js为例，整个应用中是没有HTML文件的，所有的响应HTML都是node动态渲染的，包括里面的元信息、css、js等，在渲染过程中，next.js会根据路由，将首页所有的组件渲染成html，而其他保留原生组件的形式在客户端渲染。
好处：
与node中间层渲染一样。
场景：
需要首屏快速加载、SEO 友好。
五、其他
如果是前后端分离，也可以使用后端模板渲染。
说明：
前端调试需要搭配handlebars、ejs等模板引擎进行本地调试，后端调试需要测试机。