第八章 服务器端渲染

8.1 初识服务器渲染

8.1.1客户端渲染和服务端渲染的区别

客户端渲染，即传统的单页面应用（SPA）模式，Vue.js构建的应用程序默认情况下是一个HTML模板页面，只有一个id为app的div根容器，然后通过webpack打包生成css、js等资源文件，浏览器加载、解析来渲染HTML
html仅仅作为静态文件，客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端，然后根据html上的JavaScript，生成DOM插入html

服务器端渲染，Vue进行服务器端渲染时，需要利用Node.js搭建一个服务器，并添加服务器端渲染的代码逻辑。使用webpack-dev-middleware中间件对更改的文件进行监控，使用webpack-hot-middleware中间件进行页面的热更新，使用vue-server-renderer插件来渲染服务器端打包的bundle文件到客户端。
服务器端渲染，是前后端不分离的模式，界面都是服务器端准备好的，浏览器只管请求就好了

服务端渲染相对于传统的SPA（单页面应用来说），主要有以下优势：
利于SEO
首屏渲染速度快

服务器端渲染的不足：
服务器端压力增加
涉及构建设置和部署的要求

8.1.2服务器端渲染的注意事项

1.版本要求
2.路由模式
hash模式中改变hash值不会重新加载页面
history模式利用history.pushStateAPI来完成URL跳转而无需重新加载页面
由于hash模式的路由提交不到服务器上，因此服务器端渲染的路由需要使用history模式

8.2服务器端渲染的简单实现

8.2.1创建vue-ssr项目

服务器端渲染的实现，通常有3种方式：
①手动进行项目的简单搭建
vue-server-renderer是Vue中处理服务器处理的一个模块，给Vue提供在Node.js服务器端渲染的功能
②使用Vue CLI3脚手架进行搭建
③利用一些成熟框架来搭建（如Nuxt.js）

8.2.2渲染vue实例

1.创建Vue实例
2.创建渲染器
3.将Vue实例渲染成html

8.2.3Express搭建SSR

Express是一个基于Node.js平台的Web应用开发框架，用来快速开发Web应用
1.创建Express实例
2.读取模板
3.处理GET请求
4.将vue实例渲染为html并输出

8.2.4Koa搭建SSR

Koa是一个基于Node.js平台的Web开发框架，致力于成为Web应用和API开发领域更富有表现力的技术框架
1.创建koa实例
2.读取模板
3.添加中间件处理所有请求
4.将vm渲染为html

8.3webpack搭建服务器端渲染

8.4Nuxt.js服务器端渲染框架

8.4.1创建Nuxt.js项目

Nuxt.js是一个基于Vue.js的轻量级应用框架，可用来创建服务端渲染应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性
脚手架工具：create-nuxt-app
①确保已经安装好了node.js和vue-cli脚手架
②全局安装create-nuxt-app脚手架工具

npm install create-nuxt-app@2.9.x -g

③在项目存储目录下执行以下命令，创建项目

npx create-nuxt-app my-nuxt-demo

④在创建项目过程中，会询问选择哪个包管理器，在这里选择使用npm
⑤当询问选择哪个渲染模式，在这里选择使用SSR
⑥安装配置完成后，启动项目

cd my-nuxt-demo
npm run dev

8.4.2页面和路由

在项目中，pages目录用来存放应用的路由及视图，目前该目录下有两个文件，分别是index.vue和README.md，当直接访问根路径"/"的时候，默认打开的是index.vue文件
Nuxt.js会根据目录结构自动生成对应的路由配置，将请求路径和pages目录下的文件名映射
目录相当于路径的一层
Nuxt.js提供了非常方便的自动路由机制，当它检测到pages目录下的文件发生变更时，就会自动更新路由

8.4.3页面跳转

Nuxt.js中使用nuxt-link组件来完成路由的跳转，它类似于Vue中的路由组件router-link，它们具有相同的属性，并且使用方式也相同
需要注意的是在Nuxt.js项目中不要直接使用a标签来进行页面的跳转，因为a标签是重新获取一个新的页面，而nuxt-link更符合SPA的开发模式
①声明式路由

②编程式路由