最近在做网站的SEO,前端是用Vue.js开发的(非SPA),看了些网上的帖子大体方向就是 Prerender / SSR 两条路。
采用SSR的话无疑可以解决问题,但感觉有点重,改造起来代价略高,因此目前主要在研究Prerender。
该图是我目前的大体思路:定期预渲染所有需要SEO的页面,用户或爬虫访问时直接返回渲染好的HTML。
网上很多Prerender的方案都是只针对爬虫做预渲染,但我觉得如果对用户也能这么做的话有两点好处:
1.完全不用担心返回给搜索引擎的内容与返回给用户的不一致而被搜索引擎视为作弊的风险(Google文档有说明,如果发现只对搜索引擎可见而用户不可见的内容会视为欺诈);
2.针对用户也做预渲染的话相当于顺便做了一层缓存,能够大大减轻服务端的压力(类似于间接实现了 squid / varnish 的作用)。
这个方案比较明显的不足就是数据更新的实时性较差,不过我们网站内容更新频率较低,而且即使有敏感信息的变动也可以手动触发特定页面的预渲染。
虽然该方案看上去比较美好,但实施下来遇到一个棘手的问题:预渲染后的页面JS交互效果都没有了!
用webpack打包后的原始HTML中包含了引用 vendor.js / manifest.js / <currentPage>.js 的script标签,但即使预渲染后的页面保留这些引用,仍然无法触发各种事件。
有没有什么好办法能够有效地解决这个问题?恳请赐教~