王尘宇

做者/冯雨森

概述

优化SEO将改善网站在搜刮引擎成果中的排名，吸引更多的用户拜候网站，进步网站的拜候量，从而提拔品牌效应。

搜刮引擎其实不会施行JavaScript文件，因而只要将数据在html文件中静态化才会被搜刮引擎检索到。

支流SEO处理计划

1. SSR办事端衬着

如VUE-SSR，页面在办事端衬着完成后返回给客户端。

- 长处：SEO效果好，首屏衬着快。

- 缺点：开发成本高，SPA应用无法快速迁徙为SSR。页面由办事端衬着，办事器开销大。

2. Nuxt

连系了SPA和SSR，Nuxt在办事端运行一个Nuxt办事，客户端倡议恳求后，会先在办事端运行页面的Nuxt的asyncData和fetch钩子，凡是在那两个钩子里初始化页面数据恳求，Nuxt会在钩子施行完毕并衬着完数据后返回页面。比拟SSR，Nuxt的开发体例和SPA大部门都不异，而且开发会愈加便利，例如路由会间接根据层级构造主动生成，不需要本身写路由，开发成底细比SSR低了良多，迁徙成本也相对较低。

- 长处：开发成本和SPA类似，SPA应用迁徙成本较低，SEO效果好，能够选择打包成SPA仍是SSR，拥有SSR的大部门长处。

- 缺点：办事器开销大，仍然是在办事端停止页面衬着，而且因为Nuxt办事可能与后端办事不在一路，有可能因为恳求收集延迟招致首屏速度变慢。目前的坑也比力多，踩坑也是个不轻松的过程。

3. 静态 html

最原始的办法，关于静态数据来说，SEO不是问题。

- 长处：页面小，不会引入 vue/react/angular 等框架，大幅削减js的体积，静态数据SEO效果好，首屏衬着快。

- 缺点：开发成本高，维护成本高，而且接口数据是无法静态化的，只对无接口数据需求的纯静态站点有优势。

4. 预衬着

可间接在SPA应用根底上增加预衬着插件即可实现预衬着,例如：prerender-spa-plugin。预衬着是在当地构建时，将指定路由的页面全数衬着出一份html，在客户端恳求页面时先恳求那份html。

- 长处：SPA应用成本更低的优化SEO计划，只需要添加插件和设置装备摆设，首屏衬着速度快，SEO效果好。

- 缺点：因为构建衬着页面时，当地情况为localhost，所有与window.location相关代码都可能会出问题，那会招致良多链接错误问题，固然能够注入变量来处理，但是多情况构建仍然可能碰到问题，而且要做良多额外的处置。prerender-spa-plugin是基于puppeteer的，撑持接口拉取，但是衬着发作在构建阶段，而且是当地情况，会有良多其他问题，例如每次接口数据修改还需要从头构建，而且衬着页面时一旦有接口报错招致页面衬着失败，也将会是个费事的事。我小我认为预衬着仍是更合适纯静态类spa站点的静态化。

离线预衬着

离线预衬着与预衬着类似，但是处理了预衬着的一些问题，离线预衬着的利用场景仍具有很大的局限性，但是在特定的场景下，却长短常适宜的计划。

LStack的官网www.lstack.com就利用了离线预衬着做为SEO处理计划，我们先看一下关于官网的需求：

1. SEO优化要好

2. 数据要利用接口数据

3. 不克不及利用办事端衬着（页面很少变革，利用办事端衬着浪费办事器资本）

SEO的要求，起首就能够排除SPA了，数据要利用接口数据，那原生html那种无法静态化接口数据的计划也无法满足那个要求，不克不及利用办事端衬着，又再次排除了办事端衬着和Nuxt。而预衬着又存在诸多问题，事实上LStack官网重构前恰是利用的预衬着计划，只对静态数据做了静态化，但是仍对代码有侵入性，而且碰到了一些当地情况衬着页面而招致的问题，处置那些问题，需要在写代码时考虑那种情况的处置。在那种情况下，离线预衬着就是最适宜的处理计划了。

长处

- 革新简单，对源代码0侵入，不需要任何革新，spa不需要任何修改就能够仅搭建一个爬虫办事来实现SEO优化。

- 能够对接口数据静态化。

- 不占用办事器资本，衬着一次，即可以反复利用，曲到下次数据变革从头衬着。

- 加速首屏衬着，首屏效果和办事端衬着一致。

- 能够摆设到cdn/oss。

缺点

- 仅适用于数据改动频次低，时效性低的站点，例如官网，案牍也许一个月变动一次。

- 开发成本固然低，但是搭建维护坑比力多，需要考虑的点较多。

- 和预衬着一样，因为js拉取完毕后会以spa形式衬着页面，因而js加载完成后页面会明灭一次，替代掉静态html内的内容。

原理

离线预衬着利用爬虫爬取页面，生成静态html，从而实现动态数据的静态化。

爬虫利用puppeteer，puppeteer是nodejs的一个爬虫框架，供给了对headless chrome的高级操控api，headless chrome为无界面chrome。利用那种体例衬着页面，完全模仿了用户的实在拜候情况。

- 爬虫生成的静态html，只是对spa本来没有数据的index.html填充了数据，js拉取回来后，仍然会施行js，接口仍然会触发，行为和spa没有区别，只是首屏从空白页面变成了填充了数据的页面。

- 涉及到登录等有形态的部门，因为爬虫衬着的情况并没有用户登录信息，所以首页面老是未登录形态，js加载完毕后，才会判断登录形态。

计划

项目构建完毕后，将构建完成的源代码上传至OSS，然后拉取源文件到容器中，Nginx代办署理此项目，然后Puppeteer拜候Nginx，对每个路由依次拜候并衬着页面，根据路由构造摆设文件目次构造，然后打包上传至oss。上传完毕后拉取衬着胜利的页面，笼盖到容器中。

踩坑

1. 为了在只用一个Nginx办事的情况下，包管无论页面能否颠末爬虫处置都要能够一般拜候，而且数据也如果最新的，能够参考如许的规则：每一级路由都有对应的文件夹，此路由页面为此文件夹下的index.html。所有页面路由默认婚配/[url]/index.html，手动拼接/index.html后缀，如许爬虫处置过的页面都能够被一般拜候到，而若是此时后端数据更新，要从头衬着页面，因为爬虫会比及页面完全衬着完毕才会贮存页面，因而此时最新数据已经通过接口返回了，没必要担忧数据仍然是旧的。而当页面没有被爬虫处置过时，页面只要一个index.html，其他路由城市404，此时当找不到对应文件时，不返回404页面，而是返回index.html，前端js加载完毕后，主动判断路由来跳转对应的页面，若是路由页面不存在，也是前端跳转404，此时的行为完满是spa行为，只要首屏会拉取html，其余页面跳转都是spa行为。

location/ {root/usr/share/nginx/html/website/website;indexindex.html;gzip_staticon;try_files$uri$uri/ /$1/index.html;}

2. linux情况下，puppeteer安拆会报错，是因为chrome安拆报错。能够手动安拆chrome，然后puppeteer启动添加参数。

constbrowser =awaitpuppeteer.launch({args: [--no-sandbox,--disable-dev-shm-usage]});

3. 内网可能会碰到dns问题，爬虫爬到了公网上，招致页面爬错，设置装备摆设好dns即可。

4. SSL证书错误，只需要在启动参数里添加ignoreHTTPSErrors: true，忽略SSL错误。

5. linux下中文乱码问题，安拆中文编码即可。

6. 每一套源码应该有一份配套的html页面，若是代码做了修改，webpack打包出的js文件名也会变革，若是继续利用旧的html，则会招致js拉取到错误的代码，为什么不是404而是200呢？因为Nginx设置装备摆设中，404的时候，默认转发index.html，所以那种情况下js其实不会404，而是js里面都是html代码。而若是如许的工作发作了，那那个页面无论是用户仍是爬虫，都只能拜候到静态的html了，只能从头拉代替码，而且不要把旧的html页面笼盖进去，若是是主动化摆设，脚本逻辑上就需要多做一些考虑了。

7. puppeteer是node的库，但是有基于其他语言的封拆，例如java版封拆为jvppeteer，但用法上可能会有区别。

LStack产物简介

面向行业应用开发商（ISV/SI）供给混合云/边沿云场景下云原生应用开发测试、交付、运维一站式办事，帮忙企业接纳云原生敏捷开发交付办法论，从而进步软件开发人员效率、削减运维成本，加快数字化转型，并最末实现营业立异。

-End-