如何轻松将15分钟学会vue项目教程改造成SSR（小白友好版）？

本文共计4561个文字，预计阅读时间需要19分钟。

15分钟学会Vue项目改造为SSR+PWA：网上看了很多服务器渲染的例子，基本都是从0开始的，用Nuxt或Vue官方推荐的ssr方案（vue-server-renderer）进行改造，但我们在开发过程中基本已经实现了SSR。

15分钟学会vue项目改造成SSR

Ps：网上看了好多服务器渲染的例子，基本都是从0开始的，用Nuxt或者vue官网推荐的ssr方案（vue-server-renderer），但是我们在开发过程中基本上是已经有了现有的项目了，我们所要做的是对现有项目的SSR改造。那么这里，跟我一起对一个vue-cil2.0生成的项目进行SSR改造

关于这篇文章的案例源代码我放在我的github上面，有兴趣的同学，也可以去我的github查看我之前写的博客。博客

一、改造技术的分析对比。

一般来说，我们做seo有两种方式：

1、预渲染

我在性能优化的博客中说过，预渲染的问题，预渲染是一个方案，使用爬虫技术。由于我们打包过后的都是一些js文件，使用一些技术（puppeteer）可以爬取到项目在chrome浏览器展示的页面，然后把它写入js,和打包文件一起。

类似prerender-spa-plugin 。最大的特点就是，所有获取的数据都是静态的，比如说你的页面首页有新闻，是通过接口获取的，当你在2019-11-30打包之后，不管用户在2020年也是看到的2019-11-30的新闻，当然的爬虫爬到的也是。