前端服务端渲染
导读
前端页面模板本⽂主要是从三个⽅⾯学习服务端渲染，内容整理⾃多个博客。
服务端渲染是什么？什么是服务端渲染？（服务端渲染的运⾏机制）
为什么使⽤服务端渲染？服务端渲染解决了什么问题？
什么情况下使⽤服务端渲染？（服务端渲染的应⽤实例与使⽤场景）
如下图所⽰，
左图页⾯没使⽤服务渲染，当请求user页⾯时，返回的body⾥为空，之后执⾏js将html结构注⼊到body⾥，结合css显⽰出来；右图页⾯使⽤了服务端渲染，当请求user页⾯时，返回的body⾥已经有了⾸屏的html结构，之后结合css显⽰出来
⼀、概念
⾸先，说到服务端渲染我们要先对渲染这个概念有⼀个⼤概的了解
渲染：就是将数据和模版组装成html
客户端渲染（CSR）VS服务端渲染(SSR)
那么，为了更好的理解服务端渲染，我们也很有必要去了解⼀下客户端渲染。将客户端渲染与服务端渲染同时进⾏学习理解。
1.客户端渲染
1.1概念
解释⼀：客户端渲染模式下，服务端把渲染的静态⽂件给到客户端，客户端拿到服务端发送过来的⽂件⾃⼰跑⼀遍js，根据JS运⾏结果，⽣成相应DOM，然后渲染给⽤户。
解释⼆：html 仅仅作为静态⽂件，客户端在请求时，服务端不做任何处理，直接以原⽂件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，⽣成 DOM 插⼊ html。
延伸：前端渲染的⽅式起源于JavaScript的兴起，ajax的⼤热更是让前端渲染更加成熟，前端渲染真正
意义上的实现了前后端分离，前端只专注于UI的开发，后端只专注于逻辑的开发，前后端交互只通过约定好的API来交互，后端提供json数据，前端循环json⽣成DOM插⼊到页⾯中去。
1.2.利弊
好处： ⽹络传输数据量⼩、减少了服务器压⼒、前后端分离、局部刷新，⽆需每次请求完整页⾯、交互好可实现各种效果
坏处：不利于SEO、爬⾍看不到完整的程序源码、⾸屏渲染慢（渲染前需要下载⼀堆js和css等）
2.服务端渲染
2.1.概念
解释⼀：服务端在返回 html 之前，在特定的区域，符号⾥⽤数据填充，再给客户端，客户端只负责解析 HTML 。
解释⼆：服务端渲染的模式下，当⽤户第⼀次请求页⾯时，由服务器把需要的组件或页⾯渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到⼿的，是可以直接渲染然后呈现给⽤户的 HTML 内容，不需要为了⽣成 DOM 内容⾃⼰再去跑⼀遍 JS 代码。使⽤服务端渲染的⽹站，可以说是“所见即所得”，页⾯上呈现的内容，我们在 html 源⽂件⾥也能到。
2.2.利弊
好处:⾸屏渲染快、利于SEO、可以⽣成缓存⽚段，⽣成静态化⽂件、节能（对⽐客户端渲染的耗电）
坏处:⽤户体验较差、不容易维护，通常前端改了部分html或者css，后端也需要修改。
3.对⽐
其实前后端的渲染本质是⼀样的，都是字符串的拼接，将数据渲染进⼀些固定格式的html代码中形成最终的html展⽰在⽤户页⾯上。 因为字符串的拼接必然会损耗⼀些性能资源。
如果在服务器端渲染，那么消耗的就是server端的性能。
如果是在客户端渲染，常见的⼿段，⽐如是直接⽣成DOM插⼊到html 中，或者是使⽤⼀些前端的模板引擎等。他们初次渲染的原理⼤多是将原html中的数据标记（例如{{text}}）替换。
⼆、为什么使⽤服务端渲染，它解决的是什么问题
简单总结起来就是两点：
⾸屏加载快
相⽐于加载单页应⽤，我只需要加载当前页⾯的内容，⽽不需要像 React 或者 Vue ⼀样加载全部的 js ⽂件
SEO 优化
对于单页应⽤，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页⾯。
为了更便于理解，下⾯⼏段话摘⾃掘⾦⼩册：
事实上，很多⽹站是出于效益的考虑才启⽤服务端渲染，性能倒是在其次。
假设 A ⽹站页⾯中有⼀个关键字叫“前端性能优化”，这个关键字是 JS 代码跑过⼀遍后添加到 HTML 页⾯中的。那么客户端渲染模式下，我们在搜索引擎搜索这个关键字，是不到 A ⽹站的——搜索引擎只会查现成的内容，不会帮你跑 JS 代码。A ⽹站的运营⽅见此情形，感到很头⼤：搜索引擎搜不出来，⽤户不到我们，谁还会⽤我的⽹站呢？为了把“现成的内容”拿给搜索引擎看，A ⽹站不得不启⽤服务端渲染。
但性能在其次，不代表性能不重要。服务端渲染解决了⼀个⾮常关键的性能问题——⾸屏加载速度过慢。在客户端渲染模式下，我们除了加载 HTML，还要等渲染所需的这部分 JS 加载完，之后还得把这部分 JS 在浏览器上再跑⼀遍。这⼀切都是发⽣在⽤户点击了我们的链接之后的事情，在这个过程
结束之前，⽤户始终见不到我们⽹页的庐⼭真⾯⽬，也就是说⽤户⼀直在等！相⽐之下，服务端渲染模式下，服务器给到客户端的已经是⼀个直接可以拿来呈现给⽤户的⽹页，中间环节早在服务端就帮我们做掉了，⽤户岂不“美滋滋”？
三、 什么情况下使⽤服务端渲染？
通过服务端渲染的概念以及它的两个特点：⾸屏加载速度快、SEO优化。
我们知道，服务端渲染其实就是由浏览器做的⼀些事情，我们放到了服务端去做，那么对于掘⾦、简书、CSDN、知乎等⽹站的搭建，这种在⽹上⼀搜搜出⼀堆东西的⽹站，SEO做的很好，应该多少都⽤到服务端渲染了吧？当然，做服务端渲染成本是⾼昂的。
vue全家桶或者react全家桶，都是推荐通过服务端渲染来实现路由的。
服务端渲染并⾮完全之策（服务器稀少⽽宝贵），关于⾸屏渲染体验以及SEO的优化⽅案很多，在不使⽤服务端渲染这个操作下，我们最好的处理⽅式就是寻替代优化⽅案。
关于在server端还是在browser端渲染的选择，更多的是要看业务场景。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。