关于服务器端渲染方案，之前只接触了基于react的Next.js，最近业务开发vue用的比较多，所以调研了一下vue的服务器端渲染方案。 首先：长文预警，下文包括了两种方案的实践，没有耐心的小伙伴可以直接跳到方案标题下，down代码体验一下。
1、什么是服务器端渲染（ssr）？
简单来说就是用户第一次请求页面时，页面上的内容是通过服务器端渲染生成的，浏览器直接显示服务端返回的完整html就可以，加快首屏显示速度。
举个栗子：
当我们访问一个商品列表时，如果使用客户端渲染（csr），浏览器会加载空白的页面，然后下载js文件，通过js在客户端请求数据并渲染页面。如果使用服务器端渲染（ssr），在请求商品列表页面时，服务器会获取所需数据并将渲染后的HTML发送给浏览器，浏览器一步到位直接展示，而不用等待数据加载和渲染，提高用户的首屏体验。
2、服务器端渲染的优缺点
优点：
（1）更好的seo：抓取工具可以直接查看完全渲染的页面。现在比较常用的交互是页面初始展示 loading 菊花图，然后通过异步请求获取内容，但是但抓取工具并不会等待异步完成后再行抓取页面内容。
（2）内容到达更快：不用等待所有的 js 都完成下载并执行，所以用户会更快速地看到完整渲染的页面。
缺点：
（1）服务器渲染应用程序，需要处于 Node.js server 运行环境
（2）开发成本比较高
总结：
总得来说，决定是否使用服务器端渲染，取决于具体的业务场景和需求。对于具有大量静态内容的简单页面，客户端渲染更合适一些，因为它可以更快地加载页面。但是对于需要从服务器动态加载数据的复杂页面，服务器端渲染可能是一个更好的选择，因为他可以提高用户的首屏体验和搜索引擎优化。
vue的两种渲染方案
方案一：vue插件vue-server-render结论前置：不建议用，配置成本高
官网地址： https://v2.ssr.vuejs.org/zh/
首先要吐槽一下官网，按官网教程比较难搞，目录安排的不太合理，一顿操作项目都没起来...
并且官网示例的构建配置代码是webpack4的，现在初始化项目后基本安装的都是webpack5，有一些语法不同
（1）首先，先初始化一个npm项目，然后安装依赖得到一个基础项目 。（此处要注意vue-server-renderer 和 vue 必须匹配版本）
另外：我现在用的"vue-loader": "^15.9.0"版本，之前用的是"vue-loader": "^17.0.1",报了一个styles的错
（2）配置app.js，entry-client.js，entry-server.js，将官网参考中的示例代码（传送门： 构建配置 ）拷贝至对应文件。
（3）在根目录下创建server.js 文件
其中一个非常重要的api：createBundleRenderer，这个api上面有一个方法renderToString将代码转化成html字符串，主要功能就是把用webpack把打包后的服务端代码渲染出来。具体了解可看官网bundle renderer指引（传送门： bundle renderer指引 ）
（4）接下来是config配置
在根目录新增config文件夹，然后新增四个配置文件：webpack.base.config，webpack.client.config，webpack.server.config，setup-dev-server（此方法是一个封装，为了配置个热加载，差点没搞明白，参考了好多）（官网传送门： 构建配置 ）
大部分官网有示例代码，但是要在基础上进行一些更改。
（5）配置搞完了接下来是代码渲染
在src目录下，新增index.template.html文件，将官网中的例子（地址：使用一个页面模板 ）复制，并进行一些更改
（6）再搞个store和api模拟一下数据请求
这里介绍一下一个很重要的东西asyncData 预取数据，预取数据是在vue挂载前，所以下文这里用了上下文来获取store而不是this
asyncData: ({ store }) => { return store.dispatch('getDataAction') },
在src下创建api文件夹，并在下面创建data.js文件，在src下创建store文件夹，并在下面创建index.js文件。
（7）编写组件，在src/components文件夹下写两个组件，在app.vue中引用一下，用上刚写的模拟数据
（8）配置路由并在app.vue使用路由
（9）根目录下创建一个.babelrc，进行配置
（10）改写package.json执行命令
大搞告成，执行一下dev命令，可以通过访问localhost:8080端口看到页面，记得带上路由哦～
执行build命令可看到，最后dist文件下共有三个文件：main.[chunk-hash].js，vue-ssr-client-manifest.json，vue-ssr-server-bundle.json
方案二：基于vue的nuxt.js通用应用框架
一对比，这个就显得丝滑多了～ 官网地址： nuxt.js
先对比一下两种方案的差别
1.vue初始化虽然有cli，但是nuxt.js的cli更加完备
2.nuxt有更合理的工程化目录，vue过于简洁，比如一些component，api文件夹都是要手动创建的
3.路由配置：传统应用需要自己来配置，nuxt.js自动生成
4.没有统一配置，需手动创建。nuxt.js会生成nuxt.config.js
5.传统不易与管理底层框架逻辑（nuxt支持中间件管理，虽然我还没探索过这里）
显而易见这个上手就快多了，也不需要安装一大堆依赖，如果用了sass需要安装sass和sass-loader，反正我是用了
（1）创建一个项目 可选npm，npx，yarn，具体看官方文档
npm init nuxt-app <project-name>
（2）pages下面创建几个文件
nuxt是通过pages页面形成动态的路由，不用手动配置路由。比如在pages下面新增了个文件about.vue，那么这个页面对应的路由就是/about
其实这个时候运行npm run dev 就可以看到简单的页面了
（3）模拟接口
这里介绍一个插件，可以快速创建一个服务
npm i json-server
安装完后，在根目录新增db.json文件，模拟几个接口
运行命令json-server --watch db.json --port=8000(不加会端口冲突)，就可以看到
因为是get请求，可以直接点击访问可以看到mock的数据已经返回了
（4）页面调用
先配置一下axios，推荐使用nuxt.js封装的axios："@nuxtjs/axios": "^5.13.6"，然后再在nuxt.config.js文件中modules下面配置一下就可以使用了
modules: [ '@nuxtjs/axios'],
随便找个接口调用一下
刷新下页面就可以看到效果了，这里注意$axios有两个get方法，一个$axios.get还会返回头部等信息，另一个$axios.$get只返回结果
总结：
从页面篇幅上应该也能看到哪个容易上手了，nuxt相对于插件来说限定了文件夹的结构，并通过此预定了一些功能，更好上手。预设了利用vue.js开发服务端渲染所需要的各种配置，并且提供了提供了静态站点，异步数据加载，中间件支持，布局支持等。
