什么是前端渲染和后端渲染？

  前言

  早期的网站，几乎所有都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但多年过去，很多当时壮心满满的框架（rendr、Lazo）从先驱变成了先烈。同构到底是不是未来？自己的项目该如何选型？我想不应该只停留在追求热门和拘泥于固定模式上，忽略了前后端渲染之“争”的“核心点”，关注如何提升“用户体验”。

 

  后端渲染（服务器端渲染）

  早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。

  后端渲染过程（如下图）：

• 一个页面有自己对应的网址，也就是URL
• URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller处理
• Controller进行各种处理，最终生成HTML或者数据，返回给前端
• 这就完成了一个IO操作

　　

  后端渲染的优势：

• 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）
• 利于SEO

  后端渲染的缺点：

• 整个页面的模块由后端人员来编写和维护
• HTML代码和数据以及对应的逻辑会混在一起，编写和维护都是非常糟糕的

 

  前端渲染

  前端渲染的方式起源于JavaScript的兴起，ajax的大热更是让前端渲染更加成熟，前端渲染真正意义上的实现了前后端分离，前端只专注于UI的开发，后端只专注于逻辑的开发，前后端交互只通过约定好的API来交互，后端提供json数据，前端通过ajax获取数据，并通过js把数据渲染到页面上去。

　　

   前端渲染优势：

• 前后端责任清晰，后端专注于数据上，前端专注于交互和可视化上
• 局部刷新。无需每次都进行完整页面请求
• 网络传输数据量小

  前端渲染缺点：

• 前端耗时较多，不利于SEO

 

  SPA（单页面富应用）阶段

  其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则。（例如vue里组件对应一个路由）

  改变URL不会去服务器请求新的资源，因为改变的是前端路由。当然如果刷新的话还是会向服务器发送请求。

　　

 

 

 

 

---

 

参考资料：https://www.bilibili.com/video/BV15741177Eh?p=101 

https://github.com/camsong/blog/issues/8