细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）

时间 2019-11-06 标签细说后端模板渲染客户端 node 中间层服务器 ssr

前端与后端渲染方式的发展大体经历了这样几个阶段：后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）。php

1. 后端模板渲染

前端与后端最初的渲染方式是后端模板渲染，就是由后端使用模板引擎渲染好 html 后，返回给前端，前端再用 js 去操做 dom 或者渲染其余动态的部分。css

这个过程大体分红如下几个步骤：html

在这个过程当中，前端的 html 代码须要嵌入到后端代码中（如 java、php），而且在不少状况下，前端源代码和后端源代码是在一个工程里的。前端

因此，不难看出，这种方式的有这样的几个不足：vue

尽管如此，但由于这种方式是最先出现的方式，而且这种渲染方式有一个好处，就是前端可以快速呈现服务器端渲染好的页面，而不用等客户端渲染，这可以提供很好的用户体验与 SEO 友好，因此当下不少比较早的网站或者须要快速响应的展现性网站仍然是使用这种方式。java

随着前端工程化与先后端分离的发展，以及前端组件化技术的出现，如 react、vue 等，客户端渲染已经慢慢变成了主要的开发方式了。node

与后端模板渲染恰好相反，客户端渲染的页面渲染都是在客户端进行，后端不负责任何的渲染，只管数据交互。react

这个过程大体分红如下几个步骤：git

这样一来，前端与后端将彻底解耦，数据使用全 ajax 的方式进行交互，如此即可先后端分离了。github

其实，不难看出，客户端渲染与先后端分离有很大的好处：

因此，客户端渲染与先后端分离如今已是主流的开发方式了。

但这种方式也有一些不足：

为了解决客户端渲染的不足，便出现了 node 中间层的理念。

传统的 B/S 架构中，是 浏览器 -> 后端服务器 -> 浏览器，上文所讲的都是这种架构。

而加入了 node 中间层以后，就变成 浏览器 -> node -> 后端服务器 -> node -> 浏览器。

这个过程大体分红如下几个步骤：

一个典型的 node 中间层应用就是后端提供数据、node 层渲染模板、前端动态渲染。

这个过程当中，node 层由前端开发人员掌控，页面中哪些页面在服务器上就渲染好，哪些页面在客户端渲染，由前端开发人员决定。

这样作，达到了如下的目的：

但这种方式也有一些不足：

大部分状况下，服务器端渲染（ssr）与 node 中间层是同一个概念。

服务器端渲染（ssr）通常特指，在上文讲到的 node 中间层基础上，加上前端组件化技术在服务器上的渲染，特别是 react 和 vue。

react、vue、angular 等框架的出现，让前端组件化技术深刻人心，但在一些须要首屏快速加载与 SEO 友好的页面就陷入了两难的境地了。

由于前端组件化技术天生就是给客户端渲染用的，而在服务器端须要被渲染成 html 文本，这确实不是一件很容易的事，因此服务器端渲染（ssr）就是为了解决这个问题。

好在社区一直在不断的探索中，让前端组件化可以在服务器端渲染，好比 next.js、nuxt.js、razzle、react-server、beidou 等。

通常这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求，自定义属性可能不是很强。

以 next.js 为例，整个应用中是没有 html 文件的，全部的响应 html 都是 node 动态渲染的，包括里面的元信息、css, js 路径等。渲染过程当中，next.js 会根据路由，将首页全部的组件渲染成 html，余下的页面保留原生组件的格式，在客户端渲染。