Vue SSR

SSR（Server Side Render）是服务端渲染简写，SSR解决的问题是优化SEO，缓解客户端渲染的压力。Vue ssr的流程是

将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序。
– Vue.js 服务器端渲染指南

项目结构及目录/文件作用

.
├── build                           webpack打包配置目录
│   ├── webapck.base.js             webpack公共配置
│   ├── webpack.client.dev.js       客户端打包配置
│   └── webpack.server.dev.js       服务端打包配置
├── dist                            打包输出目录
│   ├── client.bundle.js
│   ├── index.html
│   ├── main.css
│   └── server-bundle.js
├── src                             项目代码目录
│   ├── client                      客户端代码
│   │   ├── App.vue                 vue组件
│   │   ├── app.js                  vue程序启动入口
│   │   ├── components              组件目录
│   │   ├── entry.client.js         客户端打包入口
│   │   ├── entry.server.js         服务端打包入口
│   │   ├── index.template.html     程序入口html
│   │   ├── router                  vue前端路由目录
│   │   ├── store                   vuex目录
│   │   └── views                   视图目录
│   └── server                      服务端代码目录
│       ├── app.js                  服务端程序入口
│       └── router                  服务端路由
├── package.json                    
├── yarn-error.log
└── yarn.lock

ssr 思路

客户端的代码与纯客户端渲染的的vue项目基本类似，有vue使用经验的同学都比较熟悉上面相关代码的及目录的作用。aap.js不同的是纯客户端渲染直接导出跟组件，SSR则要导出一个函数，调用这个函数可以得到一个跟组件实例。服务端要对每个前端路由做相应的后端路由，是为了当用户在随机一个页面点击刷新按钮的时候，服务端能够返回正确的渲染结果。

客户端程序的启动流程

用到的npm包

{
  "devDependencies": {
    // 编译 ES 代码
    "@babel/core": "^7.13.10",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.10",

    // vue-loader 依赖的包，处理单文件组件
    "@vue/compiler-sfc": "^3.0.7",

    // --------- 一些loader---------
    // vue 组件loader
    "vue-loader": "^16.1.2",
    // js 打包loader
    "babel-loader": "^8.2.2",
    // css 处理 loader
    "css-loader": "^5.1.3",
    // ssr需要忽略css用到的loader
    "ignore-loader": "^0.1.2",

    // --------- 插件 ---------
    // webpack 编译结果自动注入html的插件
    "html-webpack-plugin": "^5.3.1",
    // 提取css 到但文件插件
    "mini-css-extract-plugin": "^1.3.9",

    // 开发中 代码变更重启服务，代码强制更新
    "nodemon": "^2.0.7",

    // 打包工具
    "webpack": "^5.27.1",
    // 打包工具 命令行工具
    "webpack-cli": "^4.5.0",
    // 开发服务webpack插件
    "webpack-dev-server": "^3.11.2",
    // 合并webpack 配置
    "webpack-merge": "^5.7.3",
    // webpack 后端编译解绑插件。否则node_modules中的依赖都将被分析，那将使包非常巨大
    "webpack-node-externals": "^2.5.2"
  },
  "dependencies": {
    // ssr使用的后端框架
    "koa": "^2.13.1",
    "koa-static": "^5.0.0",
    "@koa/router": "^10.0.0",

    // vue ssr官方工具
    "@vue/server-renderer": "^3.0.7",
    // 请求库，ssr时需要调用aip数据，支持同构
    "axios": "^0.21.1",
    // vue 框架相关
    "vue": "^3.0.7",
    "vue-router": "^4.0.5",
    "vuex": "^4.0.0"
  }
}