SSR服务器端渲染(Nuxt.js总结和豆瓣电影项目)

一.前言

开始之前,我们先了解一下普通前端渲染过程:

而加了SSR的服务器渲染过程:

明显请求次数变少了,速度更快.那接下来隆重介绍服务端渲染

什么是服务器端渲染

• 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。
• 服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。

为什么使用服务器端渲染

优点：

• 更好的 SEO.
  因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取。
• 更快的内容到达时间.
  特别是对于缓慢的网络情况或运行缓慢的设备,页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求js再由js发起数据请求，两项时间再加上浏览器渲染时间才是首屏时间。而SSR能将两个请求合并为一个。

缺点：

• 更多的服务器端负载。
• 服务器端和浏览器环境差异带来的问题，例如document等对象找不到的问题。

如何选择

建议：如果注重SEO的新闻站点，非强交互的页面，建议用SSR；像后台管理页面这类强交互的应用，建议使用前端渲染。

二.Nuxt.js学习

Nuxt.js是什么?

引用官网官网的一句话:Nuxt.js是一个基于Vue.js的通用应用框架.

开始第一个hello world应用

安装

//安装包-全局安装(已装的省略这步)
yarn add create-nuxt-app -globel
//创建项目
npm init nuxt-app 项目名
//运行项目
npm run dev

创建项目时选择的内容

目录分析

└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改⭐
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

重点关注下面几个文件夹

修改pages/index.vue文件,增加hello world ,效果如下:

路由学习

pages文件夹里的默认路由

在pages文件夹里写一个测试页面,发现在浏览器地址里加文件名成功访问到了这个页面


同样加上文件夹也可以匹配,推荐文件夹这种写法,写文件名不是不可以,文件名容易出错.

如果文件名起名为index.vue,它默认会打开这个index.vue页面.

pages文件夹路由总结:
Nuxt.js会根据pages目录结构会自动生成对应的路由配置.

内部路由实现的原理(其实就是原始的vue路由):
假设pages文件夹目录如下:

└─pages
    ├─index.vue
    └─user
      ├─index.vue
      ├─one.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
   
  routes: [
    {
   
      name: 'index',
      path:'/',
      component:'pages/index.vue'
    },
    {
   
        name:'user',
        path:'/user',
        component:'pages/user/index.vue'
    },
    {
   
        name:'user-one',
        path:'/user/one',
        component:'pages/user/one.vue'
    }
  ]
}

路由跳转(跟vue一样,也有两种)

标签跳转:

<nuxt-link to="/student"></nuxt-link>

api跳转:

this.$router.push('/student')

这两种方式实现效果一样.

动态路由(实际动态传参)

跳转前携带参数:

准备好组件