更高性能解决React/Vue.js SEO优化问题

我们都知道，在React和Vue.js中，打包出来的都是单页面应用，访问页面时，都是动态的、由JS渲染Dom呈现在浏览器上。

而搜索引擎爬取网页的途径是，访问你的页面，读取你页面的Dom。大部分搜索引擎并不会直接执行你的Js（尽管Google、Bing等搜索引擎可能支持了JavaScript），但是这仍然对于SEO（搜索引擎优化）是一个巨大的灾难。

为了解决这一问题，各个生态推出了各自的SSR（如Vue.js的Nuxt、React的Next.js）。这些SSR将组件在本地渲染，对于网站的名称、各种description之类的，还需要再通过http或config来读取，延缓了首屏加载时间，并且严重的耗费了服务器的资源，导致性能拉跨。

而在原始前端中，采用前后端结合的方式，虽这种方式性能和优势要高于前后端分离，但是也给开发造成了不便。

那么我们是否可以将两个创新技术与原始技术结合呢？我将它称为“内容预置”（Content Preset）

它的实现方式大概是这样的：

1. 通过各种方式，在你的开发环境上层添加一个后端服务器，这个服务器将会在每次请求时，更改你文件的某一部分（你可以通过注释/标签替换法来实现）；
2. 前端和后端约束使用同一个路由规则文件，这个规则文件内，需声明后端调用的模块（这个模块中，应该根据匹配到的路由规则，从数据库中读取内容，并且可以转换为富含语义化标签的HTML代码和一段json代码）；
3. 编写数据库/后端程序（这部分交给后端同学来完成就行），让后端也匹配一次路由，找到路由文件中定义的模块名，调用该模块；
4. 将该模块生成的HTML代码统一放在一个css设置为绝对不可见的容器内（目的是让搜索引擎可以看到，人眼看不到）；
5. 将该模块生成的json代码通过script也注册到页面的window对象中（目的是让React程序也可以读取到后端获取的内容，无需二次请求）；
6. 打包后约束你的生产环境。

我认为这样做的好处：

• 前端不需要向后端API发送请求来获取内容；
• 通过HTML语义化标签利于SEO优化，搜索引擎能够直接通过语义化标签获取你内容；
• 对于服务器资源占用相对较少；
• 采用前后端混合方式开发性能更高，首屏加载速度更快；
• 无需通过预置请求、Config等方法获取网站相关固定名称。

我认为这样做的坏处：

• 涉及的技术栈过广，且目前没有能够明确完成这一方式的框架（本人正在计划制作）；
• 随较于前后端结合稍有提升，但可能仍会导致开发效率底下。