前端应用的三种渲染方式

一. 什么是渲染

这里所说的渲染指的是把(数据 + 模板)拼接到一起的这个事儿。

例如对于我们前端开发者来说最常见的一种场景就是:请求后端接口数据，然后将数据通过模板绑定语法绑定到页面中，最终呈现给用户。这个过程就是我们这里所指的渲染。

渲染本质其实就是字符串的解析替换，实现方式有很多种;但是我们这里要关注的并不是如何渲染，而是在哪里渲染的问题

二. 客户端渲染

概述

随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的项目就是单页应用(SPA)，他们属于客户端渲染。

优点

用户体验好、渲染性能好、可维护性高等。

缺点

1. 首屏加载时间过长

   与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容，用户需要等待客户端JS 解析执行完成才能看到页面，这就使得首屏加载时间变长，从而影响用户体验。

2. 不利于 SEO

   当搜索引擎爬取网站 HTML 文件时，单页应用只有一些基本的html骨架和资源路径，它的 HTML 没有内容，因为他它需要通过客户端 JavaScript解析执行才能生成网页内容，而目前的主流的搜索引擎对于这一部分内容的抓取还不是很好。

三. 服务端渲染

概述

最早期，Web 页面渲染都是在服务端完成的，即服务端运行过程中将所需的数据结合页面模板渲染为 HTML，响应给客户端浏览器。所以浏览器呈现出来的是直接包含内容的页面。这种方式的代表性技术有:ASP、PHP、JSP，再到后来的一些相对高级一点的服务端框架配合一些模板 引擎。

优点

首屏加载时间短、利于 SEO。

缺点

1. 应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力;
2. 前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案;
3. 由于内容都是在服务端动态生成的，所以服务端的压力较大;
4. 相比目前流行的 SPA 应用来说，用户体验一般;

但是不得不说，在网页应用并不复杂的情况下，这种方式也是可取的。

四. 同构渲染(现代化的服务端渲染)

概述

同构渲染 =【服务端渲染】 + 【客户端渲染】。isomorphic web apps(同构应用):isomorphic/universal，基于 react、vue 框架，客户端渲染和服务器端渲染的结合，在服务器端执行一次，用于实现服务器端渲染(首屏直出)，在客户端再执行一 次，用于接管页面交互，核心解决 SEO 和首屏渲染慢的问题。

相关技术

1. React 生态中的 Next.js
2. Vue 生态中的 Nuxt.js
3. Angular 生态中的 Angular Universal

工作流程

1. 客户端发起请求
2. 服务端渲染首屏内容 + 生成客户端 SPA 相关资源
3. 服务端将生成的首屏资源发送给客户端
4. 客户端直接展示服务端渲染好的首屏内容
5. 首屏中的 SPA 相关资源执行之后会激活客户端 Vue
6. 之后客户端所有的交互都由客户端 SPA 处理

优点

首屏渲染速度快、有利于 SEO

缺点

1. 开发成本高。
2. 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应 用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
3. 更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略

五. 总结

在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该问的第一个问题是，是否真的需要它。这主要 取决于内容到达时间 (time-to-content) 对应用程序的重要程度。例如，如果你正在构建一个内部系统，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之 举。然而，内容到达时间 (time-to-content) 要求是绝对关键的指标，在这种情况下，服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

事实上，很多网站是出于效益的考虑才启用服务端渲染，性能倒是在其次。 假设 A 网站页面中有一个 关键字叫“前端性能优化”，这个关键字是 JS 代码跑过一遍后添加到 HTML 页面中的。那么客户端渲染模 式下，我们在搜索引擎搜索这个关键字，是找不到 A 网站的——搜索引擎只会查找现成的内容，不会帮 你跑 JS 代码。A 网站的运营方见此情形，感到很头大:搜索引擎搜不出来，用户找不到我们，谁还会用我的网站呢?为了把“现成的内容”拿给搜索引擎看，A 网站不得不启用服务端渲染。 但性能在其次，不代表性能不重要。