使用vue-cli3构建一个SSR应用程序

1、前沿

1.1、什么是SSR

SSR（服务端渲染）顾名思义就是将页面在服务端渲染完成后在客户端直接展示。

1.2、客户端渲染与服务端渲染的区别

• 传统的SPA模式，即客户端渲染的模式

Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中

用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户

• SSR模式，即服务端渲染模式

用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户

1.3、服务器端渲染 (SSR)的优劣

优势

• 更好的 SEO -----由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
• 用户将会更快速地看到完整渲染的页面

劣势

• 开发条件所限-----浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；
• 涉及构建设置和部署的更多要求----服务器渲染应用程序，需要处于 Node.js server 运行环境。
• 更多的服务器端负载----在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源

2、SSR有哪些钩子函数

由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created会在服务器端渲染 (SSR) 过程中被调用 。

这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。

参考链接：https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F