TIP
针对公司现有技术栈情况调研的可实施方案
# 方案1.prerender-spa-plugin (npm插件)
# 原理介绍
此方式归属于预渲染，实现方式是在打包最后阶段，访问打包后的文件，并跳转到指定地址（代码提前规划好的路由地址），获取到dom信息后生成对应的index.html文件，设置了多少个路由地址，就打开多少个网址（可理解成多个tab标签），并生成index.html。
# 优点
- 设置预渲染简单, 对代码的改动小，基本无改造成本。
# 缺点
- 需要登录权限的页面无法预渲染。
- 需要请求接口数据的资源没法预渲染出来，接口没通的时候dom已经获取结束。
- 页面跳转会暴露之前生成的静态页面一闪而过。( 需要特殊解决 )
- 只适合于做少数页面进行SEO的情况, 如果页面成百上千, 不推荐。 (打包慢)
- 成熟度有待商榷，没法保证每个路由生成的index.html 都是合格的，如果有一个页面没法正常返回dom，打包会被卡住。
# 介绍 NuxtJS
# Nuxt.js（github开源，strat41.4k）
# 服务器端渲染（SSR）
这是 Nuxt 最受欢迎的模式。利用 SSR（也叫做 "universal" or "isomorphic" 模式），Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端，而不是纯 javascript。与传统的 Vue SPA 相比，使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。 因为由开发者独立实现 SSR 将会非常繁琐，Nuxt.js 对此提供了开箱即用的全面支持，并帮你规避常见的陷阱。
# 生成静态站点 (SSG)
生成静态站点是现在的一个热门话题（也叫做 JAMStack）。与其换一个框架并花时间去适应它，为什么不一石二鸟呢？ (only proverbial 🐦🐦) Nuxt.js 支持基于 Vue 应用程序生成静态站点。这是“两全其美”的，因为你不要服务器，但是仍能获得 SEO 的好处，这是因为 Nuxt 将预先渲染所有页面，并且包括必要的 HTML。此外，你可以轻松地将生成的页面部署到 Netlify 或 GitHub pages 上。
# 单页应用程序 (SPA/CSG)
不需要 SSR 或生成静态站点，但仍希望从 Nuxt 提供的好处中获益？你是否正在慢慢转换你的应用程序并希望起步阶段是轻量的？那么传统的 SPA 模式更适合你。最终你将获得一个你所熟悉的典型的 Vue SPA，但会受到 Nuxt 配置和框架本身的影响
# 方案2.NuxtJs-SSG：server site generate
# 相同点
- 编译打包时, 就会帮你处理成纯静态文件，首屏访问速度超快
- 需要熟悉Nuxt.js框架（vue）
- 已有vue.js项目转换成nuxt.js. 改造成本高
- nuxt特点开箱即用，和vue.js编程习惯高度一致。
- 更好的SEO体验，方便搜索引擎收录网站。
# 不同点
- 纯静态文件，dom已提前生成。
- 静态网页不宜遭到黑客攻击，安全性更高。
- 非服务端渲染，不需注意node服务等问题。
- 静态文件，流量大不存在node服务压力。
- 服务器请求链路是用户到服务器
# 方案3.NuxtJs-SSR：server site rendering
# 相同点
- 编译打包时, 就会帮你处理成纯静态文件，首屏访问速度超快
- 需要熟悉Nuxt.js框架（vue）
- 已有vue.js项目转换成nuxt.js. 改造成本高
- nuxt特点开箱即用，和vue.js编程习惯高度一致。
- 更好的SEO体验，方便搜索引擎收录网站。
# 不同点
- 静态文件+服务端渲染, 可获取接口数据再返回dom（详情页）。
- 非纯静态网站，容易遭到恶意攻击。
- 需要关注服务器node服务运行问题（服务端渲染，pm2进程守护）
- 服务端渲染，流量大需要针对node服务优化（多实例，强缓存，协商缓存，http2.0）来提高并发性能。
- 服务端的网络环境要优于客户端，内部服务器之间通信路径也更短，即服务器到服务器。
# 方案4.PhantomJS (针对蜘蛛爬虫 做处理)
# 特点
Phantomjs是一个基于webkit内核的无头浏览器，没有UI界面，就是一个浏览器，其内的点击、翻页等人为相关操作需要程序设计实现。这种解决方案其实是一种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。
# 流程图
← 目标 NuxtJS项目构建 →