写了个前端渲染的教程。
打滚求星星。
后端渲染是什么？
首先说说以前的后端渲染的方式:
- 用户向服务器发起请求
- 服务器拦截用户请求，根据 路由/表单 确定用户的动作
- 服务器根据用户动作执行相应操作（对数据库的增删查改吧一般是）
- 完成操作后整理要展示给用户看的数据
- 找到网页模板，用数据替换模板中要被替换的部分
- 输出替换完成的html文档
看上去好像没啥不好。
后端渲染的问题：
- 和原生应用的操作体验没法比，因为渲染是在服务器完成的，想看到新的内容必须从服务器端获取新的html文档，就会造成刷新，一个全白的页面闪现后再换成新的页面，给人的操作一种断层的感觉。
- 对服务器的压力较大，如果有很多个用户同时请求服务器，服务器在同时要渲染N多页面，会崩溃的……
- 如果开发多个平台的，需要额外写提供给 Native APP 的API，明明数据差不多的，再加上后面的维护，浪费人力。
前端渲染是什么？
和刚刚的后端渲染相比，前端渲染把 用数据去替换模板 这个工作放在了前端来进行。
就是让JS脚本来通过AJAX向服务器获取数据，然后替换HTML内容。为什么要这样做呢？
前端渲染如何解决这些问题？
前端渲染一开始也需要服务器向用户浏览器发送一个文档，这个文档可能是空的，什么内容也没有，但是引入了js。
当js加载完毕后，js会向服务器发起异步请求获取数据。然后js来把数据显示到页面上。
就我的理解来说，web前端工程师主要做的事情，就是把这个部分捋清楚，编写合理的逻辑，让程序按顺序执行，让数据和交互更合理的发生。
这个过程发生在用户的浏览器上，所以是前端完成的渲染（把数据/内容/样式填充到浏览器上让用户看到）过程。请求数据是异步的，页面不需要刷新，给人一种很流畅的感觉。
顺序大概是：
- JS加载完成
- JS请求初始化接口获取初始化数据
- JS用数据生成HTML，展示给用户
- 用户操作，JS根据用户操作请求对应的接口
- 服务器根据请求的接口（路由/表单）确认用户的操作
- 服务器执行相应逻辑，从数据库获取数据并返回
- JS根据接口返回的数据修改HTML，给用户看结果
相比之下，前端的事变多了，后端的事变少了。但是解决了之前提到的一些痛点问题。
所以，还没试过这种新玩法的同学们，赶紧上车啦。