详解后端模板渲染、客户端渲染、节点中间层、服务端渲染（ssr）)前后端渲染方法的发展大致经历了几个阶段：后端模板渲染、客户端渲染、节点中间层、服务端渲染（ssr）。1.后端模板渲染前后端初始渲染方式为后端模板渲染，即后端使用模板引擎渲染html后返回给前端，前端使用js操作dom或渲染其他动态部分。这个过程大致分为以下几个步骤：前端请求一个地址url，后端接收请求，然后根据请求信息从数据库或者其他地方获取相应的数据，使用模板引擎（如asjava>jsp,php>smarty）将这些数据Render成html，返回html文本给前端，在这个过程中，需要在后端代码中嵌入前端的html代码（如java、php），很多时候在工程上前端源码和后端源码是合二为一的。因此不难看出这种方式有几个缺点：前后端混在一起，不方便本地开发，本地模拟调试，不方便自动化测试。充分利用前端建设生态，开发效率低，项目难以管理和维护，可能存在前后端职责不明确的问题。但是由于这种方式是最先出现的，而且这种渲染方式有一个优点，就是前端可以快速呈现服务端渲染的页面，而不用等待客户端渲染，可以提供很好的用户体验体验和SEO友好，所以很多早期的网站或需要快速响应的展示网站仍然使用这种方式。2.客户端渲染随着前端工程的发展和前后端分离，以及前端组件技术如react、vue的出现，客户端渲染逐渐成为主要开发方法。与后端模板渲染相反，客户端渲染的页面渲染是在客户端进行的，后端不负责任何渲染，只负责数据交互。这个过程大致分为以下几个步骤：前端请求一个地址url，后端收到这个请求，然后解析完js后直接返回对应的html文件给前端，然后从中获取对应的数据后台通过ajax，然后js将这些数据渲染成页面。这样前后端就会完全解耦，完全ajax的方式进行数据交互，做到前后端分离。其实不难看出，客户端渲染和前后端分离有很大的好处：前端独立，可以充分利用前端的强大功能生态更好地管理代码，更高效地开发、调试和测试前后端代码解决方案。耦合后可以更好的扩展和重构。因此，客户端渲染和前后端分离是现在主流的开发方式。但是这种方法也有一些缺点：首屏加载慢，因为js加载后才能渲染，SEO不友好，因为html中几乎没有可用的信息3.为了解决不足ofclientrendering,thenodemiddlelayer出现了节点中间层的想法。在传统的B/S架构中，是浏览器->后端服务器->浏览器，也就是上面说的架构。添加node中间层后，变为浏览器->节点->后端服务器->节点->浏览器。这个过程大致分为以下几个步骤：前端请求地址，urlnode层接收请求，然后根据请求信息向后端服务器发送请求，获取数据。在本地获取相应的数据，返回给节点层。节点层根据这些数据渲染首屏html。节点层将html文本返回给前端。典型的node中间层应用是后端提供数据，node层渲染模板??，前端动态渲染。在这个过程中，节点层由前端开发人员控制。页面中哪些页面在服务端渲染，哪些页面在客户端渲染，由前端开发人员决定。这样达到以下目的：保留后端模板渲染，首屏快速响应，SEO友好保留前端分离，客户端渲染功能（首屏服务端渲染，其他客户端渲染），但这种方式也有一些缺点：增加了中间层，降低了应用性能，增加了架构的复杂性和不稳定性，降低了应用的安全性。对开发人员的要求要高得多。4.服务端渲染（ssr）在大多数情况下，服务器端渲染（ssr）与节点中间层是同一个概念。服务端渲染（ssr）一般是指基于上面提到的node中间层加上前端组件化技术在服务端进行渲染，尤其是react和vue。react、vue、angular等框架的出现让前端组件化技术大行其道，但一些要求首屏快速加载的页面和SEO友好的页面却陷入了两难境地。因为前端组件化技术本来就是用于客户端渲染，需要在服务端渲染成html文本，这确实不是一件容易的事，所以服务端渲染（ssr）就是为了解决这个问题。好在社区一直在不断探索，让前端组件化可以在服务端渲染，比如next.js、nuxt.js、razzle、react-server、beidou等，一般这些框架都会有一些对目录结构、书写风格、组件集成、项目构建等要求，自定义属性可能不是很强。以next.js为例，整个应用中没有html文件，所有的响应html都是由node动态渲染的，包括meta信息、css、js路径等。在渲染过程中，next.js会渲染所有首页的组件按照路由转成html，其余页面会保留原组件的格式在客户端渲染。5.另外，不需要首屏快速加载和SEO友好，全客户端渲染需要首屏快速加载和SEO友好。如果使用react、vue等组件技术，就不得不使用node中间层和服务端Rendering，如果技术团队不支持，不建议使用react、vue等组件技术，其中第一个屏幕加载速度快且对SEO友好。前后端分离后，也可以做后端模板渲染，这样前端调试可以配合handlebars和ejs等模板引擎进行本地调试，而后端调试需要去试机。关注更多博文，查看https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：免费转载-非商业-非衍生-署名保持（CreativeCommons3.0License）
