SEO、SSR、Nuxt.js

SEO

SSR

Nuxt 介绍

Nuxt环境搭建使用

Nuxt的默认模版和默认布局

Nuxt的错误页面和个性meta设置

asyncData方法获取数据

静态资源和打包

插件

自定义axios

SEO

SEO是网站为了提高自已的网站排名，获得更多的流量，对网站的结构及内容进行调整优化，以便搜索引擎（百度，google等）更好抓取到更优质的网站的内容。

从上图可以看到SEO是网站自己为了方便spider抓取网页而作出的网页内容优化，常见的SEO方法比如：
1）对url链接的规范化，多用restful风格的url，多用静态资源url；
2) 注意title、keywords的设置。
3）由于spider对javascript支持不好，对于网页跳转用href标签。

SSR

服务端渲染到底有什么好处？

** 最主要的原因 是SPA单页应用不利于搜索引擎的SEO操作。比如你做一个新闻网站，流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎，但是它们对SPA的抓取并不好，特别是百度根本没法抓取到SPA的内容页面，所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。

那Nuxt.js适合做新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。

**SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段

A. 服务器渲染 ssr

SSR：服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器【客户端（浏览器）只负责显示dom元素内容】。

优点：

SEO不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
有利于SEO，网站通过href的url将spider直接引到服务端，服务端提供优质的网页内容给spider。
更快内容到达时间，传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接讲HTML字符串传递给浏览器。大大加快了首屏加载时间。

缺点：

服务端完成一部分客户端的工作，通常完成一个需求需要修改客户端和服务端的代码，开发效率低，不利于系统的稳定性

B. 客户端渲染：

适用场景：对SEO没有要求的系统，比如后台管理类的系统，如电商后台管理，用户管理等。

特点：（1）在服务端只是给客户端响应的了数据，而不是html网页（2）客户端（浏览器）负责获取服务端的数据生成Dom元素

优点：

客户端负责渲染，用户体验性好，服务端只提供数据不用关心用户界面的内容，有利于提高服务端的开发效率。

缺点：

不利于网站进行SEO，因为网站大量使用javascript技术，不利于spider抓取网页。

Nuxt 介绍

通俗一点得说：就是Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及。很多人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，它简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

原理：

1、用户打开浏览器，输入网址请求到Node.js
2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据
3、Nuxt.js获取到数据后进行服务端渲染
4、Nuxt.js将html网页响应给浏览器

Nuxt 解决的问题

首屏加载慢
seo问题 *
前后端分离中异步请求数量过多等问题

服务端渲染可以很好的解决打包文件过大导致的首次加载白屏问题，并且页面打开速度相比于 js 渲染界面快很多。

其实回头想想，在我们把渲染的工作从服务端抽出来到浏览器端（JS）的时候，我们的目的只是明确的前后端职责划分，并不是非浏览器渲染不可。
只是因为在传统的开发模式中，出了服务器就到了浏览器，所以前端的工作内容只能被限制在浏览器端。
也因此很多人认定了后端 = 服务端前端 = 浏览器端
—— 前后端分离的思考与实践

vue中渲染：

1.从浏览器的地址栏中键入一条请求时，请求被交给了 nuxt 服务器（或者 nginx→nuxt）

nuxt 服务器解析 vue 组件（中的 asyncData 方法），并将数据绑定到 html。然后再返回给浏览器。

vue 组件其被访问的情况分为两种，浏览器端渲染和 nuxt 服务器端渲染。

Nuxt特点

基于Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7语法支持
打包和压缩JS和CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器：SASS、LESS、Stylus等

Nuxt环境搭建使用

npm install -g create-nuxt-app // 安装create-nuxt-app

create-nuxt-app <项目名称>

1.layouts文件夹中可以添加我们整个项目的布局

2. components 需要的组件

3 .store 就是vuex，保存了我们所需要的状态

4. pages 项目页面部分

5. nuxt.config.js 配置文件（webpack的基本配置 -- url-loader）

项目的运行顺序：1.Middleware层-->2.layouts层-->3.pages层-->4.components层

https://blog.csdn.net/weixin_33910460/article/details/93578257?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

单独页面样式：页面组件的配置中加入 transition 字段。

Nuxt的默认模版和默认布局

在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模版。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模版比较方便，但是只能每个页面都引入。

1.默认模板

Nuxt为我们提供简单的默认模版订制方法，只要在根目录下创建一个app.html就可以。

<!DOCTYPE html>
<html lang="en">
<head>{{ HEAD }}
</head>
<body><p>学习nuxt.js</p>{{ APP }}
</body>
</html>

{{ HEAD }}读取的是nuxt.config.js里的信息，{{APP}} 就是我们写的pages文件夹下的主体页面；需要注意的是HEAD和APP都需要大写，如果小写会报错的；重启服务器；

2. 默认布局

layouts/default.vue；需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制。

<template><div><p>学习nuxt.js</p><nuxt/></div>
</template>

总结：区分默认模版和默认布局的区别，模版可以订制很多头部信息，包括IE版本的判断；模版只能定制<template>里的内容，跟布局有关系。在工作中修改时要看情况来编写代码。

Nuxt的错误页面和个性meta设置

1. 建立错误页面

根目录下的layouts文件夹下建立一个error.vue文件

2. 个性meta设置

页面的Meta对于SEO的设置非常重要，比如你现在要作个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。

asyncData方法获取数据

// ansycData的promise方法 -- 安装Axiosnpm install axios --save  asyncData(){return axios.get('https://api.myjson.com/bins/1ctwlm').then((res)=>{console.log(res)return {info:res.data}})}// ansycData的await方法  ansyc...wait来解决异步
async asyncData(){let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')return {info: data}
}

静态资源和打包

1. “~”就相当于定位到了项目根目录，这时候图片路径就不会出现错误，就算打包也是正常的

<div><img src="~static/logo.png" /></div> // css中引用，方式相同

2. 打包

npm run generate // 然后在dist文件夹下输入live-server就可以了，若没有安装，则需安装

插件

nuxt提供插件, 是对已有的程序进行增强或控制

1.在/plugins/目录下创建js文件

2.在nuxt.config.js文件中进行注册my.js

plugins: [
{src:'~/plugins/my.js'}
],

// 默认情况下，发现js执行了两次

// 原因如下：因为使用的SSR技术, 前端分成了前端客户端和前端服务端

// 优化配置

/**
*mode属性:
* 不写mode属性, 表示前端客户端和前端服务端都生效
* mode: 'client' 表示是仅在前端客户端生效
* mode: 'server' 表示是仅在前端服务端生效
*/
export default {
plugins: [
{ src: '~/plugins/my.js' },
{ src: '~/plugins/my1.js', mode: 'client' },
{ src: '~/plugins/my2.js', mode: 'server' }
]
}

自定义axios

总结：Nuxt.js框架非常简单，因为大部分的事情他都为我们做好了，我们只要安装它的规则来编写代码，Nuxt.js 主要关注的是应用的 UI渲染（使用vue来开发多页应用，最终生成html静态文件）

SEO、SSR、Nuxt.js相关推荐

【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
csrutil是什么_CSR、SSR、NSR、ESR傻傻分不清楚，一文帮你理清前端渲染方案！
01 引言随着前端系统的越发复杂,前端的性能也受到越来越多的重视.Google也不断在推进新的性能相关指标,从原先的Performance API中的指标逐步演进成用户性能体验相关的指标. 对于用户 ...
回归模型评价指标-SST、SSR、SSE、R-square
本文介绍了回归模型在模型选择上的常见评估指标:SST.SSR.SSE和R-square. SST:The sum of squares total SSR:The sum of squares reg ...
CSR、SSR、NSR、ESR傻傻分不清楚，一文帮你理清前端渲染方案！
01 引言随着前端系统的越发复杂,前端的性能也受到越来越多的重视.Google也不断在推进新的性能相关指标,从原先的Performance API中的指标逐步演进成用户性能体验相关的指标. 对于用户 ...
服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
前端页面渲染方式CSR、SSR、SSG
三种渲染方式: 使用预渲染之前,首先要考虑是否真的需要它. 如果初始加载时的额外几百毫秒并不会对应用产生影响,这种情况下去使用预选染将是一个小题大作之举. 首屏加载时间是绝对关键的指标,在这种情况下, ...
基于 vue.js 的 SSR 技术 — Nuxt.js
为什么要使用Nuxt.js Nuxt 基于一个强大的模块化架构.你可以从 50 多个模块中进行选择,让你的开发变得更快.更简单.对 PWA 的支持.添加谷歌分析到你的网页或生成网站地图,这些功能都无需 ...
SSG、SSR、CSR的区别
现象: 访问页面从浏览器上输入url 到页面首屏完全展示这一过程所花的时间极短,而且在页面中点击链接切换路由的操作非常顺滑,几乎页面可以达到"秒切"的效果,根本不会有卡顿等待的情况 ...
#深度解析# SSR，MSE，RMSE，MAE、SSR、SST、R-squared、Adjusted R-squared误差的区别
文章目录概述 1. SSE 2. MSE 3. RMSE 4. MAE 5. R-squared 6. Adjusted R-squared 7 对比 MAE.MSE.RMSE.R-square.A ...

SEO、SSR、Nuxt.js

SEO

SSR

Nuxt 介绍

Nuxt环境搭建使用

Nuxt的默认模版和默认布局

Nuxt的错误页面和个性meta设置

asyncData方法获取数据

静态资源和打包

插件

自定义axios

SEO、SSR、Nuxt.js相关推荐

最新文章

热门文章