什么是前端渲染？什么是服务端渲染？两者区别及应用场景

举个商品列表页面为例子。

前端渲染：说的应该是刚进入页面时，商品列表这些数据都不给你，不会渲染出这些数据。然后加载script时，再用ajax或者fetch之类的发起了请求另一个接口，服务端返回了商品列表的json数据给你，你在js中用模板引擎之类的技术，把这些数据拼成html字符串插入到Dom里。

服务端渲染：服务端用php的smarty模板或者java的jsp，把页面的商品列表信息渲染出来了，返回一个html给浏览器了。

区别：如果页面要求被蜘蛛抓取，前端渲染的数据就不能被抓取到，但是服务端渲染的页面就能被抓取到。如果有SEO要求，只能用服务端渲染。如果用Node.js渲染的话，那就都没这些问题了。

我最开始接触是在Vue的官网上，开始是作为一个小节出现，现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。

服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。

回顾下前端的 历史 ，最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户，用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷，这种‘兼职’状态已经不能满足需求，细分之下的前端出现了。

随后为了方便的开发，开始提倡 前后端分离，大家各做各的，彼此之间通过基于HTTP的各种API协作，变成了数据动态生成的新一代站点。

再后来出现了Vue等三大MV*框架，网站做成了SPA应用，解决了很多问题的同时也带来了新问题，其中最突出的两个：难以SEO和首屏加载缓慢。

想要了解更多关于前端技术内容欢迎关注尚硅谷教育！

前端安全相关面试题

前端JS高阶面试题

前端设计模式-面试题

web前端渲染优化

web前端之二叉搜索树

---