谈谈vue的ssr方案

由于我们的vue是一个SPA单页应用有且只有一个html页面且是虚拟dom，不利于搜索引擎的蜘蛛进行网页爬取，当然也是有解决方案的 以下列举六种解决方案 仅供学习参考
1.SSR服务器渲染
2.SSG静态渲染
3.nuxt
4.Quasar
5.预渲染prerender-spa-plugin
6.Phantomjs
点击进入自建博客链接

一、SSR服务器渲染

1.采用vue官网的ssr方案
这种方案建议在开发之就要确定好是否选用，否则一个成型的vue项目要改成这种方案还是很难受的 在我们的vue3里面 对ssr支持已经非常的友好了
具体实现方案可以参考官网 https://vuejs.org/guide/scaling-up/ssr.html#writing-ssr-friendly-code
优点：很棒的ssr，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
缺点：要硬说缺点的话，需要开发之前就要敲定方案否则后期修改代码会吐血，再者需要服务器对nodejs环境的支持
适用场景：如果构建大型网站，类似 马蜂窝 淘宝 京东 各大型且需要seo

二、SSG静态渲染

这个方案在官网也有介绍 https://vuejs.org/guide/scaling-up/ssr.html#ssr-vs-ssg
比如VitePress 它是一个 Vue 驱动的静态网站生成器
优点：编译打包时, 就会帮你处理, 纯静态文件，访问速度超快；对比SSR，不涉及到服务器负载方面问题；静态网页不宜遭到黑客攻击，安全性更高。
缺点：参数多的时候
适用场景：正常普通量级官网, 博客网站等

三、Nuxt

Nuxt是建立在 Vue 生态系统之上的更高级别的框架，它为编写通用 Vue 应用程序提供了流线型的开发体验。更好的是，您还可以将其用作静态站点生成器！在vue官网作者也是很强烈的建议尝试
Nuxt是支持ssr和SSG的
Nuxt3官网链接：https://v3.nuxtjs.org/
Nuxt2官网链接：https://www.nuxtjs.cn/
适用场景：都适用 毕竟框架的出现就是解决这种事情的 但是需要去了解下本框架的坑点和一些api

四、Quasar

Quasar是一个完整的基于 Vue 的解决方案，它允许您使用一个代码库来定位 SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展。它不仅处理构建设置，还提供符合 Material Design 的 UI 组件的完整集合。
详见官网：https://quasar.dev/
适用场景：都适用 毕竟框架的出现就是解决这种事情的 但是需要去了解下本框架的坑点和一些api

三、预渲染prerender-spa-plugin

这个插件是模拟浏览器访问站点，将站点的内容以静态文件的方式保存。
如果你只是对少数页面需要做SEO处理（例如 / 首页, /about 关于等页面）

预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)

优点: 设置预渲染简单, 对代码的改动小

缺点: 只适合于做少数页面进行SEO的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)
适用场景：正常普通量级官网, 博客网站等

四、Phantomjs

Phantomjs是一个基于webkit内核的无头浏览器，没有UI界面，就是一个浏览器，其内的点击、翻页等人为相关操作需要程序设计实现
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫
这个不多说 我也没用过