Node后端数据渲染

引言：对于前端开发者来讲，在大型Web应用开发中，不少时候并不须要彻底从新设计整个应用后台的架构，更多的状况下须要结合Node的能力帮助咱们解决先后端分离开发模式下没法解决的问题。本文带咱们学习一般先后端分离的开发模式下有哪些问题，利用Node端的服务又是如何帮助咱们解决这些问题的。
本文选自《现代前端技术解析》。

SPA场景下SEO的问题

　　一般状况下，SPA应用或先后端分离的开发模式下页面加载的基本流程是，浏览器端先加载一个空页面和JavaScript脚本，而后异步请求接口获取数据，渲染页面数据内容后展现给用户。那么问题来了，搜索引擎抓取页面解析该页面HTML中关键字、描述或其余内容时，JavaScript还没有调用执行，搜索引擎获取到的仅仅是一个空页面，因此没法获取页面上中的具体内容，这就比较影响搜索引擎收录页面的内容排行了。尽管咱们会在空页面的里面添加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，也能够提取不一样的模板渲染页面返回给不一样的用户浏览器，因此这种实现方式不只很是适合大型应用服务的实现场景，并且能够方便地实现网站的响应式内容直出。

　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　Node直出层开发Web架构

　　本文选自《现代前端技术解析》，点此连接可在博文视点官网查看此书。
　　　　　　　　　　　　　　　　　　　　　
　　想及时得到更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。