Nuxt2引入Axios实现SSR服务端渲染教程-爬虫验证SEO效果-幽络源

概述

本教教程为Nuxt2引入axios，配置axios，通过Fetch钩子在组件中用axios调用SpringBoot接口实现SSR渲染的教程。

引入Axios

1、安装 @nuxtjs/axios

项目根目录执行如下命令安装@nuxtjs/axios 模块

npm install @nuxtjs/axios

如图

2、配置 nuxt.config.js

关键如下

export default {
  // 自身配置
  server: {
    host: '0.0.0.0',
    port: 3000
  },
  // 配置 axios 全局 baseURL
  axios: {
    baseURL: 'http://localhost:8080' // 所有 $axios 请求都会基于此地址
  },
  // 必须是 universal 模式才能启用 SSR
  mode: 'universal',
  // 注册模块
  modules: [
    '@nuxtjs/axios'
  ]

}

如图

改造组件加载数据SSR渲染

1、了解两个钩子

幽络源这里的nuxt项目目前是这样的：components下有一个.vue组件文件，然后在pages目录下的index.vue引入了该组件。

关于Nuxt2项目中的SSR渲染，可以用 asyncData ，可以用 fetch，他们的区别参考如下

对比项	asyncData	fetch
是否支持 SSR	✅ 是	✅ 是
是否能用于任意组件	❌ 只能用于 pages/ 组件	✅ 可用于任何组件
是否有 loading 状态	❌ 需手动管理	✅ 自带 $fetchState.pending
是否支持客户端数据更新	❌ 页面加载后无法再调用	✅ 可手动 this.$fetch()
推荐场景	简单页面，数据只加载一次	复杂组件，需刷新数据

上面的表格并不是说asyncData不好。

如果幽络源这里使用asyncData的话，那只能在index.vue中使用，也就是在index.vue中请求接口获取数据，然后将数据传递给组件。

如果用fetch，则可以直接在组件使用，对于我来说，倾向于解耦，因此选择fetch，有的人则可能会选择asycnData，因为他们是不建议组件自己请求数据的，需要保持组件纯净。

幽络源这里的组件代码如下，css部分就不粘贴了，只给出关键部分，这是一个两行四列的卡片组件

<!-- components/MovieList.vue -->
<template>
  <div class="movie-list">
    <!-- 显示加载状态 -->
    <div v-if="$fetchState.pending" class="loading">
      <p>加载中...</p>
    </div>

    <!-- 显示错误 -->
    <div v-else-if="$fetchState.error" class="error">
      <p>❌ {{$fetchState.error.message}}</p>
    </div>

    <!-- 显示数据 -->
    <div v-else>
      <!-- 合并为一个 el-row -->
      <el-row :gutter="20" class="movie-row">
        <el-col :span="6" :xs="12" v-for="item in movies" :key="item.id">
          <el-card shadow="hover" class="card">
            <img :src="item.coverUrl" class="poster" />
            <div class="title">{{ item.title }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 查看更多 -->
      <div class="more">
        <el-button type="primary" round @click="$fetch">刷新</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MovieList',
  data() {
    return {
      movies: [] // 初始为空
    }
  },

  //使用 fetch 钩子，支持 SSR 和 CSR
  async fetch() {
    try {
      // 请求完整接口路径
      this.movies = await this.$axios.$get('/api/animeJP/list8')
    } catch (error) {
      // 抛出错误，会被 $fetchState 捕获
      this.$fetchState.error = error
    }
  },

}
</script>

2、核心解释

幽络源这里使用nuxt开发的主要核心就是既想快速开发页面，又想做到页面利于收录友好，因此选择了nuxt。

上面的代码中，JS部分通过 async/await的fetch钩子来加载数据，注意，一定要加上 async/await，页面才会先获取数据，然后生成HTML返回给浏览器。

如果fetch钩子不加上asycn/await，则这里就是通过JS客户端渲染的数据了，这不利于SEO。

判断是否为SSR渲染

幽络源土拨鼠这里找了一个不是Nuxt的网站，他是Vue的，域名是多少我就不说了，我们用他来对比我们的Nuxt项目，来看区别

首先爬取本地的Nuxt项目，直接爬取localhost:3000，来看首页，结果如图，可以看到在body中的非js块里面是包含了页面的数据信息的

然后来看另一个Vue的网站，爬取一下首页，如图可以看到他的body块中没有任何内容，这是因为他的页面是客户端渲染的，这显然不利于SEO

结语

如上为幽络源的“Nuxt2引入axios实现SSR服务端渲染+利用爬虫爬取判断是否SSR渲染”教程，对网站开发感兴趣的小伙伴可以加入我们的QQ群307531422