浅析 服务端渲染 / 前后端分离 / 客户端渲染

以下是个人在学习这部分知识的时候的简单总结，如有疏漏，欢迎指出。

阅读须知：后端即服务端，前端即客户端。故后端渲染等价于服务端渲染，前端渲染等价于客户端渲染，以此类推。

在渲染页面方面，大概有三种方式：

1. 后端渲染 + 后端路由 
2. 前后端分离 + 前端渲染 
3. 前后端分离 + 前端渲染 + 前端路由

第一种方式，当用户输入url的时候，前端向后端服务器发起请求。然后后端会通过一个路由表，找到该url相应的资源，并使用模板引擎（这是关键点）填充好数据，从而组装好一个完整的页面返回给前端。因为渲染工作由后端完成，所以叫做后端渲染。因为url是在后端通过路由表映射找到资源的，所以叫做后端路由。

后端渲染有利于SEO优化，因为它直接返回了完整页面，不需要再进行ajax请求动态获取数据，所以它属于静态资源，便于爬虫分析。

但缺点也很明显，这种方式的前后端分工极不明确，前后端代码混在一起也不便于后期维护。其次，因为返回资源包含页面以及数据，使得客户端加载页面的速度也会相对慢。

第二种方式，此时交互的角色除了前端与后端服务器，还多了一个静态资源服务器（其实也可以理解为是另一个后端服务器）。当用户输入url的时候，前端会向静态资源服务器请求该url对应的页面资源（不包含数据），当需要数据的时候再向后端发起ajax请求，然后页面由前端完成渲染。因为前端负责页面，后端负责数据，所以实现了前后端分离。因为页面的渲染由前端来完成，所以叫做前端渲染。由此可见，前端渲染是分为两步：拿到页面和拿到动态数据。

前端渲染的好处就是页面加载速度更快，即页面会先加载然后再ajax请求数据，用户看到页面空白的时间会更短，体验更好。而不像后端渲染需要等后端渲染好完整页面才返回显示。

但是缺点就是对SEO不友好，因为数据是动态获取的，爬虫是分析不到的。

综上，这两种方式各有利弊，需要分场合使用，平时我们所看到的购物网站其实两种方式都有用到，比如商品列表是用后端渲染完成的（便于SEO优化），评论列表是由前端渲染完成的（不需要SEO优化时，异步获取数据更好）。

第三种方式，就是在第二种方式的基础上增加了前端路由（有利于模块化开发）的技术。当用户输入url登入某个网站的时候，前端不再是每次请求都分别向静态资源服务器请求网站的其中某一个网页的资源，而是直接一次（懒加载情况下需多次）请求有且仅有一份的该网站的资源，这份资源包含了该网站所有页面渲染时所需要的代码。但是需要注意的是，前端把这一份包含了所有页面代码的资源请求下来之后，并不会把全部代码都渲染到页面上，而是会通过一个路由表，根据所输入的url来判断该渲染哪一部分到页面上，这就是前端路由。