利用PhantomJS做预渲染后生成的HTML如何保留交互效果?

最近在做网站的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标签,但即使预渲染后的页面保留这些引用,仍然无法触发各种事件。

有没有什么好办法能够有效地解决这个问题?恳请赐教~


转载于:https://juejin.im/post/5a98c61d518825557d17304c

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值