SSR
-
csr（客户端渲染）：在客户端运行js代码，右键查看源码是看不到html代码的
优点：在客户端运行代码，所以服务端压力会小，压力会给到客户端
缺点：页面初始化没有数据，所以搜索引擎爬虫爬取不到数据，不利于SEO
-
ssr（服务端渲染）：在服务端运行js代码，在客户端直接显示结果，所以右键查看源码是能看到html代码的
优点：优化SEO、加速首屏渲染
缺点：服务端执行js代码，会造成服务器压力大。
适用场景：偏静态的内容展示场景，商品详情、攻略、文章等图文混排的场景；若偏交互，SSR提前渲染的内容不多，反而加重服务器压力，不建议使用。
使用：由于SSR配置比较麻烦，所以可以使用nuxt.js框架使用，减少了用户配置，只需要关注UI
SEO
SEO(搜索引擎优化)，
-
意义：SEO做的好，能让网站在搜索引擎中排名更靠前。
-
原理：
- 抓取网页：搜索引擎通过特有爬虫，对每个页面数据进行抓取
- 处理网页：抓取到页面数据后，会对页面数据进行处理（js除外），并为关键词提供检索服务
- 提供检索服务：用户输入关键词进行检索，搜索引擎从索引数据库中找到匹配该关键词的网页
-
优化：
以下是免费情况下优化，付费的情况不谈
- TDK：title值强调重点即可；description把页面内容高度概括；keywords列举出重要关键词。
- 语义化HTML：只有语义化HTML、符合W3C规范，才能让浏览器更改好的理解页面。
nuxt.js
Nuxt.js 是一个基于 Vue.js 的通用应用框架，并且预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
1.安装
npx create-nuxt-app <项目名>
yarn create nuxt-app <项目名>
2.运行
-
开发：
npm run dev -
生产：
- 打包：
npm run build - 开启正式服务器：
npm run start - 生成静态页：
npm run generate
- 打包：
3.目录结构
nuxt目录结构和vue脚手架创建的类似
-
pages：不同的是nuxt有pages目录，它会根据目录结构自动生成对应的路由
-
plugins：插件目录
-
nuxt.config.js：nuxt配置文件
-
layouts：默认父级页面。nuxt页面由 默认父级页面+页面文件组成
<Nuxt />类似vue-view，会自动展示 pages/index.vue
4.路由
-
nuxt内置vue-router，不需要我们自己配置
-
nuxt会根据pages目录的文件结构自动生成路由的配置
-
url会与文件名字对应，例如：
pages/index.vue --- /、pages/about.vue --- /login -
路由参数：
-
查询参数：
传参：
<nuxt-link to="/about?id=100&name=laowang">跳转到about</nuxt-link>获取参数：
{{ $route.query.id }}、{{ $route.query.name }} -
路径参数：
创建
pages/goods/_id.vue接收路径参数id传参：
<nuxt-link to="/goods/100">路径传参，跳转到goods</nuxt-link>获取参数：
{{ $route.params.id }}
-
pages/index.vue
<template>
<div>
<h1>pages/index.vue</h1>
<nuxt-link to="/about">跳转到about</nuxt-link>
<nuxt-link to="/about?id=100&name=laowang">查询传参，跳转到about</nuxt-link>
</div>
</template>
pages/about.vue
<template>
<div>
<h1>pages/about.vue</h1>
<nuxt-link to="/">跳转到index</nuxt-link>
<p>获取查询参数id: {{ $route.query.id }}</p>
<p>获取查询参数name: {{ $route.query.name }}</p>
</div>
</template>
5.asyncData
- 只能用在pages目录下
- 获取页面初始化异步数据时使用
- 使用asyncData获取的数据，会在页面源码中显示
使用
asyncData() {
return {
msg: 'helloWorld~~~~~~~~~~~'
}
}
网络请求
<script>
import axios from "axios";
export default {
async asyncData() {
const {
data: { data: list },
} = await axios.post("xxx");
return {
list,
};
},
};
</script>
6.打包、部署
两种部署：静态部署、动态部署
-
静态部署：网站静态化
- 命令：
npm run generate，打包后将生成的 dist 放到服务器即可。 - 介绍：将网站所以页面、接口调用数据等等，全部在服务器端渲染成HTML静态页面，客户端直接渲染即可。
- 适用：网站数据不需要实时变化（不频繁变化），例如：官网页面
- 优点：访问速度快
- 缺点：网站数据不能实时变化，例如：交易所不能做成网站静态化
- 命令：
-
动态部署：
- 介绍：服务器中开启一个node服务，通过node启动项目
- 优点：数据可以实时更新
- 缺点：页面动态渲染，访问速度较慢
