SPA场景下SEO的问题
通常情况下，SPA应用或者前后端分离的开发模式下页面加载的基本流程是，浏览器先加载一个空页面和JavaScript脚本，然后异步请求接口获取数据，渲染页面数据内容后展示给用户。那么问题来了，搜索引擎获取到的仅仅是一个空页面，所以无法获取页面上<body>中的具体内容，这就比较影响搜索引擎收录页面的内容排行了。
如果使用Node后端数据渲染（直出），在页面请求时将内容渲染到页面上输出，那么搜索引擎获取到的HTML就已经包含页面完整的内容。
前端页面渲染展示缓慢的问题
除了SEO问题，在前后端分离的开发模式下页面在Javascript执行渲染之前是空白的。用户在看到数据时已经花费的网络等待时间：DOM下载时间+DOM解析时间+Javascript文件请求时间+JavaScript部分执行时间+接口请求时间+DOM渲染时间。这时用户看到页面数据时已经是三次串行网络资源请求之后的事情了。
然而，如果使用后端直出进行数据渲染，首先SEO问题不复存在，用户浏览器加载完DOM的内容解析后立即展示，网络加载的问题也得到解决。
前后端同构概述
1、实现同构的核心
前后端同构的宗旨是，只开发一套代码，既可以用来实现前端的JavaScript加载渲染也可以用于后台直出渲染。
2、同构的优势
(1)可以根据用户的需求方便地选择使用前端渲染数据还是后台直出页面数据；(2)开发者只需维护一套前端代码，而且可以沿用前端原有的项目组件化管理、打包模式，根据不同的构建指令生成类似的前后端数据模板或组件在前后端执行解析。
前后端同构实现原理
基于数据模板的前后端同构方案
前端模板的使用非常广泛，如Mustache、Handlebar等。基本原理是将模板描述语法与数据进行拼接生成HTML代码字符串插入到页面特定的元素中来完成数据的渲染。同理后端直出层也可以通过该方法来实现数据的渲染产生HTML字符串输出到页面上。
基于MVVM的前后端同构
MVVM框架页面上的JavaScript逻辑主要是通过Directive来实现的，一般前端页面加载完成后会开始扫描DOM结构中的Directive指令并进行DOM操作渲染或事件绑定，所以数据的显示仍然需要页面执行Directive后才能完成
在项目开发中，前端编写的同一段MVVM的语法结构通过前端MVVM框架解析或后端Directive运行解析最终都可以生成相同的HTML结构，不同的是前端执行解析后生成的是ViewModel对象并通过浏览器体现，后端渲染则生成HTML标签的文本字符串输出给浏览器。
基于VirtualDOM的前后端同构
在前端开发的组件中声明某段VirtualDOM描述语法，然后通过VirtualDOM框架解析生成VirtualDOM，这里的VirtualDOM既可以用于在浏览器端生成前端的DOM结构，也可以在直出层直接转换成HTML标记的文本字符串输出，后面这种情况就可以在服务器上实现VirtualDOM到HTML文本字符串的转换。这样，通过对VirtualDOM的不同操作处理，就可以统一前后端渲染机制，实现组件的前后端对同一段描述语法进行渲染
网友评论