本文共 811 字，大约阅读时间需要 2 分钟。

背景

由于SPA项目不利于SEO优化，于是有了以下几个方案

方案选择

方案一：服务端渲染（SSR）

• 直接java或php渲染（那样就又是前后端不分离了，不考虑）
• 服务端起一个node应用

优点：

• SEO 友好
• 首屏渲染快（可在服务端缓存页面，请求到来直接给 html）

缺点：

• 代码改动大、需要做特定SSR框架的改动（例如vue的nuxt，react的next）
• 丢失了部分SPA体验
• node 容易成为性能瓶颈

方案二：构建时预渲染方案

在项目开发完成之后，将有限的需要SEO的页面挑选出来，借助prerender-spa-plugin插件实行一次浏览器渲染，再将渲染好的源代码（.html）打包到项目包中，为这些页面在服务端额外配置路由（不再返回首页模板index.html）。这样这些页面就有单独的静态页面，从而解决了SEO和首屏问题。

优点：

• 代码侵入性小

缺点：

• 无法用于大量动态路径页面场景（生成的 html 页面数据大，而且页面数据会有更新。如 /article/123，文章页面）
• 后台请求数据变动时前端应该同步更新版本

方案三：服务端动态渲染（利用user-agent）

服务端对请求的 user-agent 进行判断，浏览器端直接给 SPA 页面，如果是爬虫，给经过动态渲染的 html 页面

方案四：直接在入口文件里写关键词

• meta 中 keywords
• 直接在 spa 的入口文件里面加上一些 dom，并设置 display: none

优点：

• 简单

缺点：

• 效果不好
• 隐藏会被识别为作弊，会处罚降权重

最终方案

这里没有一个最终方案，因为我会将这几个方案都实践一下，我们公司适合方案三，但是方案三有技术架构改动的成本，因为要加一层node。

方案一的具体实践：更新中

参考文档

转载地址：http://shpo.baihongyu.com/