Vue.js服务端渲染方案概述

针对Vue-SPA架构的技术栈,目前方案大概分为四种:

1.前端爬虫模版
clipboard.png

在div#app内制定爬虫检索内容,将站点想要暴露的关键内容都整理在div#app内,爬虫软件不论检索任意路由,获取的都是此容器内内容,待前端渲染结束后再覆盖此div#app内容即可。

优点:简单,改动小

缺点:

①模版内容与实际站点内容可能无关,模版内容需单独整理,且展示内容有限;

②模版为静态内容,异步数据无法抓取;

③会出现页面抖动的情况,需代码处理抖动情况。

此法是我查阅泰岳语义工厂(http://www.nlpai.cn/)线上站点时发现

2.网关转发

此法,将用户浏览页面和爬虫抓取页面进行区分对待,通过网关获取http user-agent字段,判断是实际用户还是爬虫软件,如果是实际用户则返回实际前端页面,如果是爬虫软件,则进行转发,转发的目的地可以是普通的静态文件服务器(静态页面),也可以是应用服务器(后端渲染页面)。

优点:可任意定制爬虫抓取内容;

缺点:

①改动较大,需前后端支持;

②存在“诈骗”嫌疑,可能会受到搜索引擎惩罚;

3.预渲染(Prenrending)prerender-spa-plugin+vue-meta

为若干页面输出静态内容,可供爬虫软件抓取,其余页面仍采用SPA方案;

优点:改动工作量适中;

缺点:

①预渲染页面必须是静态页面,数据无法异步加载;

②爬虫抓取内容较第一种方案增多,但还是有限;

4.服务端渲染(SSR)

这两种方案总体思路是差不多的,在某些技术细节上实现思路不太一样,都是使用Vue+Vuex+webpack+node.js+Express(也可使用其他框架)+webpack,具体原理及技术各自官网都有详尽描述,这里不再赘述。

(1)vue-server-renderer vue官网插件

https://ssr.vuejs.org/zh/

(2)Nuxt.js vue-ssr整体解决方案

https://zh.nuxtjs.org/

优点:能彻底解决SEO问题,是最佳方案;

缺点:改动都很大,vue-server-renderer适用于SPA改造,但是改造工作量也很大,如若采用nuxt,最好一开始技术选型就要使用,不然改动太大;

个人这段时间使用体验来说,nuxt开发体验更佳,更成熟,是一套整体解决方案,推荐新项目采用此技术方案,使用此方案可搭配node+express,简单的后台需求也可使用此技术栈实现。

阅读 361

推荐阅读
目录