最近希望在现有SPA网站的基础上，对网站进行SEO优化，所以列出了几种方案。
一、Rendertron
Rendertron是一款headless Chrome渲染解决方案，旨在即时渲染和序列化网页，它作为独立的HTTP服务器运行，使用Headless Chrome渲染请求的页面， 在SPA网站完成加载时自动检测并将响应序列化回原始请求。
具体流程：
- 增加代理服务器，用于检测是否需要预渲染；
- 代理服务器返回Rendertron服务器渲染的内容。
Demo：
环境及工具要求：Node、npm
- 下载rendertron
打开cmd命令提示符，输入
npm install rendertron
下载时间较长，需要耐心等待。
- 运行rendertron
rendertron
rendertron服务默认监听的端口是3000
浏览器输入
http://localhost:3000/render/【网站地址】
http://localhost:3000/render/https://www.hongwanyg.com
即可浏览rendertron渲染SPA网站后返回的内容。
更加详细的Demo点这里：https://www.jianshu.com/p/38e6d3bf596d
影响范围：
1、前端
前端路由模式需要启用路由的 history 模式。
需要更改门户内大部分的打开新页面的跳转地址。
2、服务端
服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html。
优缺点：
优点：影响范围最小，时间成本最低。
缺点：
- rendertron渲染速度较慢（20s+，可以通过配置缓存，降低渲染时间，但首次渲染还是慢）。
- 仅仅供给SEO使用，若想要正常使用该方式渲染出的网站，还需做进一步处理。
二、SSR for VUE
具体操作：
使用Nuxt.js或者vue-server-renderer等服务端渲染应用框架。
影响范围：
前端代码需要改动的地方非常多，大部分组件都要改。
优缺点：
优点：效果最好，基本所有页面都能满足SEO。
缺点：前端改动的成本大，时间成本高。
三、 koa2 + (ejs | pug) 或者Java + thymeleaf 产出需要SEO的页面
具体操作：
- 根据需要SEO的页面，编写对应的html文件，渲染从服务端获取的数据。
- 使用Node作为代理服务器和渲染服务器，检测到需要预渲染，则渲染对应的页面返回（过程与方案一类似）。
影响范围
- 需要新增特定的页面，供给百度蜘蛛之类的程序收集页面数据。
- 若使用koa2 + (ejs | pug) 则需要新增node程序。
优缺点
优点：不影响前端原有代码，是一种扩展式的方法。
缺点：
-
页面仅供SEO使用；
-
需要时间成本开发新增页面，或需添加代理服务器；
-
后期需要新增SEO的页面也需要跟着新增对应的页面文件。
网友评论