共计 1657 个字符，预计需要花费 5 分钟才能阅读完成。
今天给大家分享的是 Vue 服务端渲染，大概会占用大家 40 分钟的时间，今天分享的目的主要是让大家理解三个点：
1、深入理解服务端渲染 (SSR) 概念
2、掌握实现服务端渲染的 Vue 通用框架 nuxt.js 使用
3、理解 Vue SSR 实现原理
在深入理解服务器端渲染之前，我们先要知道什么是服务器端渲染？我们可以从早期的 web 开发说起，那个时候前后端还没有分离，前端是不是只负责发起请求，后端查询数据库数据，数据塞到 jsp,php 等模板，业务逻辑和数据处理是不是都在后端啊，然后后端给前端返回一个 html 页面，前端只负责展示，所以是不是可以理解为 在服务端就生成好的 html 页面，是不是就是服务端渲染 ；那什么是客户端渲染，是不是 可以理解成在客户端生成好的 html 页面就是客户端渲染 啊？
那什么是多页面应用和单页面应用呢？早期的 web 开发是不是就是多页应用的一种，每次请求都是整页加载刷新，应用由多个完整的页面构成。
那什么是单页面应用呢？我们 pc 端管理后台是不是就是单页面应用的一种 ，通俗一点说就是指 应用只有一个主页面的应用 ，我们去看单页面应用，右键‘ 查看网页源代码’是不是只有一个壳 ？<body><div id='app'></div></body> 单页面应用浏览器一开始要加载所有必须的 html, js, css，然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。
那说了这么多，我们知道服务端渲染 ssr 解决了什么问题？有什么好处？
1、更好的 SEO
为什么说有更好的 seo 呢，其实刚刚就回答了这个问题，服务端渲染返回的是完整的网页内容，是不是搜索引擎爬虫能爬的到你网页里面的内容，而单页面应用只有一个壳，爬虫不会爬取到 js 异步加载的内容
2、更快的首屏内容到达时间
为什么说服务端渲染有更快的首屏内容到达时间呢？是不是这个快慢是跟单页面相比较的，刚刚我们是不是已经回答了，单页面应用才需要浏览器一开始要加载所有必须的 html, js, css，所以首屏是不是比服务器端渲染慢 。
那现在我们已经理解了服务器端渲染和单页面应用的优缺点，如果我们要开发一个网站，比如下个季度 官网的开发 ，注重 seo 优化，希望网页内容能被搜索引擎爬到，是不是有必要考虑服务器端渲染的方式，那我们有可能回到早期的开发方式吗，后端同学估计不答应，那我们 vue 服务器端渲染就是一个 折中方案 ， 首屏实现服务器端渲染，有利于 seo 优化，同时又具备单页面应用优点；
那我们如何新建一个基于 vue+nuxt 的 ssr 项目，类似于 vue-cli 手脚架工具，我们执行 $ npx create-nuxt-app < 项目名 >，快速创建了如下目录结构的项目：
（npx 与 npm 的区别，简单讲解）
对着 ppt 解释项目目录结构；……
只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。这就是说任何 vue 其他生命周期钩子函数中的代码，只会在客户端执行。
结合实际 demo 演示讲解以下重点：
l 只是首屏服务器端渲染，同时具备 SPA 应用的优点
l 如何实现基础路由、如何实现动态路由、如何实现嵌套路由 https://zh.nuxtjs.org/guide/routing
l nuxt 自己集成了 vuex，所以不需要安装，在 /store 目录下新建 index.js 即可使用
l 异步数据获取 fetch、asyncData 使用范围
只能在页面组件使用，也就是 pages 目录下的组件，而不是 components 目录下的组件，要有所区分
beforeCreate 之前会执行这个 asyncData 函数，return 的数据最终会和 data 中的合并
l Header、Footer 等公共组件放哪？
vue-cli 入口文件是 app.vue，在 nuxt 开发当中则是./layout/default.vue
l 所有插件都写在 /plugins 目录下，这里以 element-ui.js 为例
l nuxt.config.js 配置
l 配置错误页面
你可以通过编辑 layouts/error.vue 文件来定制化错误页面
