nuxt 如何引入js_前端工程师如何选择页面渲染方式

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天和大家一起聊一下客户端渲染和服务端渲染方式的选择问题。

页面渲染方式就分两种：客户端渲染和服务端渲染，它们各有优缺点，下面我详细讲一讲。

在讲如何实现之前，先搞清楚什么是客户端渲染和服务端渲染，及它们各自的优缺点。这样才能更好的理解选择的意义。

今天不从具体技术实现过程来讲两种方式的区别(这个在后面讲实现时就会一目了然)，现只从表象层来看如何认识和区分两种渲染方式。

一、客户端渲染和服务端渲染

1. 服务端渲染

后端先调用数据库(数据接口)，获得数据后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，给用户浏览。

也就是说，从获取数据，和使用数据拼成一个HTML完整结构页面这个过程都是在服务器端完成的。浏览器拿到的是一个完整的页面结构，浏览器收到请求返回的第一时间就可以开始渲染界面。

那么如何来区分一个页面是否是服务端渲染呢？

在页面上，点右键，查看源代码，如果代码body元素里大部分内容都是有的，那基本上就是服务端渲染，如果为空和或者很少就是客户端渲染。如下图所示：

2. 客户端渲染

服务器给客户端返回的是一个空的HTML页面，也就是说body元素里的内容很少或者为空，所以内容都需要等到JS在浏览器端加载完成之后，再通过JS去拉接口数据拼成能够供浏览器渲染的完整结构。

区分方式一样。

二、如何选择哪种渲染方式

上面说了，页面渲染方式就两种，选择上其实没有标准答案，主要看你的具体使用场景。

从技术上来看，服务器端渲染需要消耗更多的服务器端资源，如CPU/内存等。这也很好理解，因为首屏的数据获取和结构的拼装过程都是在服务器端完成的。自然需要消耗资源。

然而，服务器端渲染给我们带来的好处是，对SEO比较友好(因为搜索引擎不能直接运行JS，只能对得到的HTML进行动态的分析)。再有就是页面的首屏速度比较快且无白屏帧的出现，用户体验比较好，在执行JS比较慢的老机型上优化更明显，当然，速度这一点如果不谈技术实现，和网速也有着直接的影响。

客户端渲染，所有页面数据请求和HTML结构拼装都是在浏览器端完成，客户端渲染方式有个好处是可以将静态资源部署到cdn上，因为数据请求分散在各自客户端，没有集中在服务器上处理，所以可以实现高并发。缺点就是可能首屏速度不是很快，当然，速度上网络好的时候也无所谓，其次对SEO不是很友好。

总结一下：

为了综合考虑页面在各种机型上的访问体验，减少白屏帧的出现，优化SEO，现在业界前端都比较流行使用服务端进行渲染页面，其方式无外呼使用node做中间层，使用框架做同构直出，如react和vue等，当然，也有一些现成支持服务端渲染的框架，如next.js，nuxt.js等。实现上还是比较简单，重点是需要考虑的技术环节更多更重要，后续详述。