SEO、SSR、Nuxt.js

最新推荐文章于 2024-06-21 09:32:39 发布

qq_35857490

最新推荐文章于 2024-06-21 09:32:39 发布

阅读量432

点赞数 1

分类专栏：前端文章标签： vue seo

本文链接：https://blog.csdn.net/qq_35857490/article/details/114384925

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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方法 -- 安装Axios

npm 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静态文件）

qq_35857490

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
SEO、SSR、Nuxt.js

目录SEOSSRNuxt 介绍Nuxt环境搭建使用Nuxt的默认模版和默认布局Nuxt的错误页面和个性meta设置asyncData方法获取数据静态资源和打包插件自定义axiosSEOSEO是网站为了提高自已的网站排名，获得更多的流量，对网站的结构及内容进行调整优化，以便搜索引擎（百度，google等）更好抓取到更优质的网站的内容。从上图可以看到SEO是网站自己为了方便spider抓取网页而作出的网页内容优化，常见的SEO方法比如：1）对url链接的
复制链接

扫一扫

专栏目录