Node后端数据渲染

博文视点Broadview

发布于 2020-06-11 11:08:13

9100

发布于 2020-06-11 11:08:13

文章被收录于专栏：博文视点Broadview 博文视点Broadview博文视点Broadview

小编说：对于前端开发者来说，在大型Web应用开发中，很多时候并不需要完全重新设计整个应用后台的架构，更多的情况下需要结合Node的能力帮助我们解决前后端分离开发模式下无法解决的问题。本文带我们学习通常前后端分离的开发模式下有哪些问题，利用Node端的服务又是如何帮助我们解决这些问题的。

SPA场景下SEO的问题

通常情况下，SPA应用或前后端分离的开发模式下页面加载的基本流程是，浏览器端先加载一个空页面和JavaScript脚本，然后异步请求接口获取数据，渲染页面数据内容后展示给用户。那么问题来了，搜索引擎抓取页面解析该页面HTML中关键字、描述或其他内容时，JavaScript尚未调用执行，搜索引擎获取到的仅仅是一个空页面，所以无法获取页面上<body>中的具体内容，这就比较影响搜索引擎收录页面的内容排行了。尽管我们会在空页面的<meta>里面添加keyword和description的内容，但这肯定是不够的，因为页面关键性的正文内容描述并没有被搜索引擎获取到。

如果使用Node后端数据渲染（有人称之为直出，后文中也称之为直出层），在页面请求时将内容渲染到页面上输出，那么搜索引擎获取到的HTML就已经包含页面完整的内容，页面也就更容易被检索到了。

前端页面渲染展示缓慢的问题

除了SEO问题，在前后端分离的开发模式下页面在JavaScript执行渲染之前是空白的（或提示用户加载中）。如图6-3所示，用户在看到数据时已经花费的网络等待时间：DOM下载时间 + DOM解析时间 + JavaScript文件请求时间 + JavaScript部分执行时间 + 接口请求时间 + DOM渲染时间。这时用户看到页面数据时已经是三次串行网络资源请求之后的事情了。

前后端分离方式页面渲染主要流程

然而，如果使用后端直出来进行数据渲染，首先SEO的问题不复存在，用户浏览器加载完DOM的内容解析后即可立即展示，网络加载的问题也得到解决。其他的逻辑操作（如事件绑定和滚动加载的内容）则可按需、按异步加载，从而大幅度减少展示页面内容花费的时间。那么一般Node后端数据渲染的整个流程又是怎样的呢？

图6-4为目前一般后台页面数据直出的通用架构设计，直出层接受前端的路由请求，并在Node端的Controller层异步请求服务接入层接口，获得Model数据并进行组装拼接，然后提取相对应的Node端View模板渲染出HTML输出给用户浏览器，而不用通过前端JavaScript请求动态数据后渲染。不仅如此，直出层根据不同的浏览器userAgent，也可以提取不同的模板渲染页面返回给不同的用户浏览器，所以这种实现方式不仅非常适合大型应用服务的实现场景，而且可以方便地实现网站的响应式内容直出。