关键词：

引言：对于前端开发者来说，在大型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架构

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

node学习-3:服务器渲染和客户端渲染(代码片段)

1.概念一.服务端渲染，后端嵌套模板，后端渲染模板，SSR（后端把页面组装好）做好静态页面，动态效果把前端代码提供给后端，后端则把静态html以及里面的假数据给删除掉通过模板进行动态生成html... 查看详情

node学习-3:服务器渲染和客户端渲染(代码片段)

1.概念一.服务端渲染，后端嵌套模板，后端渲染模板，SSR（后端把页面组装好）做好静态页面，动态效果把前端代码提供给后端，后端则把静态html以及里面的假数据给删除掉通过模板进行动态生成html... 查看详情

node前后端分离基本概括

...的数据编译生成页面。模板大致分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。所谓的前端渲染就是当我们去http请求的时候，我们先去请求到的是模版文件，随后数据才会过来，后端渲染是后... 查看详情

node.js借助art-template进行后端渲染并呈现页面到前端(代码片段)

...关配置3.art-template相关配置4.挂载router到"/"三、准备后端数据四、art文件配置四、controller/index.js完成路由中间件二、挂载路由中间件到router后记总结一、总体思路写好前端页面,然后在前端common.js文件 查看详情

node-1

查看源代码有页面中所搜索的文字证明是后端渲染，没有证明是前端动态创建流程图请求服务器————服务器返回一个html————浏览器解析html↑json|↑||↓后端渲染↓js重新渲染页面————执行js逻辑————加载css.js↓... 查看详情

web前后端为啥需要分离？

...，他就像餐馆里面的前台服务生直接和客户打交道的人。后端就是负责处理用户的请求，进行数据的处理，用户几乎所有操作都可以抽象为对数据的增删改查，就像餐馆里面的厨师接收服务生告诉他要炒哪些菜，厨师把菜处理好... 查看详情

使用nodejs进行后端渲染，前端还需要框架级的工具吗

参考技术A题主自己也说了是“使用Nodejs进行后端渲染”。目前有两种方式，一种是后端渲染，即：服务器生成页面返回给前台。另一种就是前端自行渲染，比如AngularJs这样的框架。至于选择哪种，还是要看是否是重体验交互，... 查看详情

在 React 中使用登录和注销的用户渲染组件

...开发了一个MERN（Mongoose、Express、React、Node）应用程序。后端将数据存储到Mongo数据库中。它使用用户数据向前端发送和接收API。我正在从后端接收 查看详情

Node.js 使用 AJAX 将数据发送到后端

】Node.js使用AJAX将数据发送到后端【英文标题】：Node.jssenddatatobackendwithAJAX【发布时间】：2017-12-1917:36:07【问题描述】：我对AJAX还很陌生，对于潜在的误解，我深表歉意，但我还没有完全理解那件事。我正在尝试一件简单的事情... 查看详情

在没有 konva-node 的 nodejs 后端上使用 konva

】在没有konva-node的nodejs后端上使用konva【英文标题】：Usingkonvaonanodejsbackendwithoutkonva-node【发布时间】：2021-11-1212:04:30【问题描述】：我们是一个由5名开发人员组成的团队，致力于实现视频渲染。此实现由两部分组成。使用angular... 查看详情

node.js-5(代码片段)

express后端渲染一个页面api接口问题：如果遇到了前后端不分离的项目，你怎么做？找后端，搭建项目启动的环境找后端模板引擎（找类似于view这样的目录）找静态资源文件目录找对应性文件，index.ejsindex.css看效果改js看效果改cs... 查看详情

使用nodejs进行后端渲染，前端还需要框架级的工具吗

nodejs做后端，它的功能就类似PHP等服务端语言。虽然语法是js，但不会在浏览器执行，所谓渲染，只是产生可被浏览器读取的HTML、css、js内容。这里js是要在浏览器端执行的，不是nodejs执行的，所以如果你需要实现复杂功能，也... 查看详情

前后端渲染的区别

后端渲染：在服务器进行渲染，服务器进程从数据库获取数据后，利用后端模板引擎，甚至是在HTML模板中嵌入后端语言（例如JSP），                将数据加载进来生成HT... 查看详情

将数据从 Node-Express 后端传递到 Vue 组件

】将数据从Node-Express后端传递到Vue组件【英文标题】：PassingDatafromNode-ExpressbackendtoVuecomponent【发布时间】：2018-02-0719:06:19【问题描述】：我仍在学习Vue.js2，所以如果这个问题有点愚蠢，我深表歉意。我正在使用MongoDB、Node、Expres... 查看详情

如果你有 apollo react 钩子从后端获取数据，你如何使用 nextjs 进行服务器端渲染？

】如果你有apolloreact钩子从后端获取数据，你如何使用nextjs进行服务器端渲染？【英文标题】：Howdoyoudoserversiderenderingwithnextjsifyouhaveapolloreacthookstofetchdatafrombackend?【发布时间】：2021-07-2014:32:06【问题描述】：我有一个nextjs项目，... 查看详情

后端一次性传了10w条数据，前端该如何处理？——面试高频(代码片段)

前端处理后端传的10w条数据1.这道题在考什么？2.先用node.js整个10w条数据3.基础代码环境4.常规处理方案5.优化的第一种方式——前端分页6.再次优化7.极致优化（最佳方案）8.知识点补充1.这道题在考什么？对于性能... 查看详情

如何从控制器渲染两种类型的数据以在 node.js 中查看？

】如何从控制器渲染两种类型的数据以在node.js中查看？【英文标题】：Howtorendertwotypesofdatafromcontrollertoviewinnode.js?【发布时间】：2019-12-1620:42:15【问题描述】：我正在尝试将两组数据模型从mongodb渲染到View。以下代码是controllers.js... 查看详情

node.jsejs模板引擎将后端数据赋值给前端js

 使用node.js的Express脚手架生成项目默认是jade模板引擎，jade引擎实在是太难用了，这么难用还敢设为默认的模板引擎，过分了啊！用handlebars模板引擎写还说的过去，但笔者更愿意使用ejs，选它是因为跟Asp.Net的模板引擎有点相... 查看详情