前端渲染模式
背景
笔者在网上冲浪的时候，看到了一个词，前端渲染模式。然后就产生了一个疑问，这是什么东西？在了解之后呢，才恍然大悟，原来我们每天在浏览器浏览的页面背后，在呈现给我们的过程也有一些不同的方法和策略，最终将页面展现给我们。那接下来就由笔者带大家看看这些方法和策略。
渲染模式
客户端渲染（CSR）
CSR（Client Side Rendering），就是一种在浏览器执行JavaScript代码已生成页面并显示的方法，这种方法更贴近现代前端开发。大致流程是用户在客户端通过浏览器发起HTML网页的请求时，服务器不做任何处理直接返回原始的静态HTML文件。客户端收到后，浏览器进行解析构建、下载执行JavaScript，这个执行JavaScript过程可能还会与服务器进行数据交互，将最终得到的结果进行渲染并展示给用户。
客户端渲染的优点
-
分工明确、前后端分离。前端可以只负责页面的UI设计与用户交互，与后端负责的数据处理以及api接口开发进行了解耦，这样前后端职能会非常的清晰，更容易开发和维护。 -
功能交互友好：因为在客户端执行代码，通过数据请求和动态渲染更新页面内容，提供更流畅的用户体验。在用户与页面交互时，浏览器只需要更新特定部分的内容，无需刷新整个页面，这对于用户来说无疑是一种很好的使用体验。 -
服务器负载小：切换页面不需要重新加载，只需要对访问请求返回一个已有的特定的页面，其他资源加载、数据以及渲染全部都由浏览器完成，避免了不必要的页面加载，所以服务器负载更小。 -
UI库以及生态丰富：前端目前主流的框架Vue、React都默认使用客户端渲染，并且这些框架提供了丰富的前端工具和生态系统，使得构建交互性强的单页应用（SPA）更加便捷。
但是客户端渲染也有它的缺点：
-
SEO不友好：因为在客户端进行渲染，搜索引擎爬虫很难在抓取页面时执行JavaScript代码，这样导致客户端渲染的应用程序不容易被索引出来。 -
首屏渲染慢：因为请求返回的是HTML和JavaScript代码，因此用户很早就能看到一个白屏页面，并且需要等待JavaScript执行的时间才能看到被渲染的页面，这取决于这个页面加载的资源以及JavaScript执行的时间。
服务端渲染（SSR）
SSR（Server Side Rendering），服务端渲染，它是用户请求页面时，服务器在服务端执行JavaScript代码，生成一个完整的HTML页面，然后将其发送给客户端的浏览器，浏览器解析就能直接显示页面内容。
最早是为了解决单页应用（SPA）产生的SEO、首屏渲染时间问题诞生的。显然，它的优点就是这两个，一是SEO比较友好，搜索引擎爬虫会比较容易抓取页面的有效内容，因为浏览器获取的是一个完整的页面资源。二是首屏渲染快，服务端直接返回的带有数据的HTML文本，浏览器只需要解析构建就能渲染页面，用户能够更快地看到页面内容，提供了比CSR更好的初始加载的体验。
这样看起来SSR比较好，不过呢它也有自己的局限：
-
页面交互较慢，数据量众多，需要多次请求的页面对于用户来说，可能会造成用户与之交互的等待时间较长，可能会降低用户体验。 -
需要更高的服务器负载，因为服务器处理页面的渲染，就需要更多的计算资源和负载均衡。如果页面的流量暴增，需要考虑服务器响应的缓存策略以及负载。 -
开发复杂度和成本高，如果出现问题，可能需要前端和后端开发人员共同进行问题的排查，对于项目的协作和维护增加了成本。
静态站点生成（SSG）
SSG（Static Site Generation），是一种构建静态网站的一种方法，即构建时就预先生成静态页面，并将其部署到CDN或者其他Web服务器中，有效提高了SEO和用户体验。
它的大致流程是，在构建过程中，将源文件以及模版等拼接结合，生成一个静态页面，之后进行预渲染，就是里面需要的数据等向服务器请求获取，并将其接入到这个静态页面中，然后将其输出成一个个文件，这时这些就是可以直接显示的资源文件。之后就可以把它们部署在支持静态文件的Web服务器，之后就可以交由用户进行请求浏览。
它的优点很多：
-
性能高，相比于SSR那样减轻了服务器的压力，还可以将部分资源放在CDN中，利用缓存。 -
SEO友好，搜索引擎更加容易抓取最终页面内容。 -
易于部署，静态页面可以部署在任何支持静态文件部署的服务器上，无需依赖其他环境。但是，它也有自己的不足之处，就是如果一个网站的静态文章数量特别多，千万级或者亿级级别的，就可能会造成网站页面重新生成时间长的问题，增加了用户等待的时间，不利于用户的使用体验。
增量静态再生（ISR）
ISR（Incremental Static Regeneration），它是上面SSG的改进，并且还结合了SSR的一些优点。它的核心思想也很简单，对于一些重要的关键的即主要的页面数据，通过SSG的方式预渲染成静态页面部署在Web服务器上，保证良好的访问性能。对于那些非重要的不关键的即次要的内容，即时响应fallback内容，并且将数据交由浏览器渲染完成，同时将其缓存到Web服务器中。
ISR就很好的在静态和动态资源之间找到了平衡点，对于不经常变动的页面就可以用SSG生成，从而达到快速加载以及低服务器负载的效果。但是有些资源的存在可能会导致用户感知上有不好的体验：
-
当访问到没被预渲染过的次要内容，就需要由浏览器进行CSR渲染，可能有加载慢的问题。 -
当访问到之前已经被渲染过，但是页面内容过期并且没有更新的页面时，用户就会得到过期缓存的数据，得到错误的页面，只有当用户重新刷新加载时才能获得最新的数据和页面。
选择
这么多选择全都要当然是不太可能的，不过这些方案也并非是互斥并列的，我们需要考虑的是自己的项目需要关注的点是哪些。
-
如果关注的是页面的交互性，那么就需要选择CSR。 -
如果关注的是SEO、首屏渲染问题等，那只能选择SSR、SSG以及ISR了，然后根据更细节的需求选择。 -
访问的页面每次都有差异性，那就是SSR咯。 -
如果静态页面较多而且不需要频繁更新就可以用SSG，相反就是ISR。
-
因此，没有最好的只有最合适的。可以根据自己的项目关注点以及各种渲染模式的优缺点进行选择，选择适合自己的渲染模式。
结语
好了，介绍了几种渲染模式的概念，并且指出了各自的优缺点，希望能够帮助大家对于前端渲染模式的理解。而且笔者才疏学浅，如有错误，欢迎大家在评论区留言指正。