segmentfault - nuxt3 axios 请求出来的数据在源代码中没有这也没有办法 SEO 呀？

Question

nuxt.config.ts 中的 ssr 也是 true

自己写的后台接口

页面显是正常的，但是右键， 查看源代码后里面没有请求回来的数据呀！

这能 SEO ？

是哪里还需要配置下吗？

nuxt.config.ts代码：

export default defineNuxtConfig({    app: {        head: {            charset: 'utf-8',            viewport: 'width=device-width, initial-scale=1',        }    },    devtools: {enabled: false},    //关闭遥测数据    telemetry: false,    modules: ['@pinia/nuxt'],    css: [        "@/assets/style/style.css"  //配置使用的样式    ],    ssr:true,})

页面代码：

<template>    <div id="body">        <div class="container">            <div id="main">                <article class="post" v-if="_length(row)>0">                    <h1 class="center">{{row.title}}</h1>                    <ul class="post-meta">                        <li>                            <time>{{dateDisplay(row.created_at)}}</time>                        </li>                        <li><a :href="row.url">默认分类</a>                        </li>                        <li><a>{{row.views}}</a> 阅读</li>                        <li><a href="#comments">评论</a></li>                    </ul>        <div class="post-content" v-html="row.content"></div>        <p class="tags">标签: <a v-for="tag in row.tag" :href="getTagUrl(tag)">{{tag}}</a></p>        <div class="post-near">            <li class="post-left">没有了</li>            <li class="post-right">没有了</li>        </div>        <div class="clearfix"></div>    </article>            </div>        </div>    </div></template><script setup lang="ts">import {onMounted,ref} from "vue";import {getArticleDetail} from "~/api/article";import type {ApiResponse,ArticleItem} from "~/types/intreface";import {dateDisplay} from "~/utils/date";import {_length} from "~/utils";import { useRoute } from '#app';const route = useRoute();const params = route.params;const id = ref(params.id);const loading = ref(false);const row = ref<ArticleItem>();onMounted(async()=>{    await fetchData();})const fetchData = async()=>{    try {        loading.value = true;        const data:ApiResponse = await getArticleDetail({id:id.value});        if(data.code!==0){            return Promise.reject(data.message);        }        row.value = data.data as ArticleItem;        if(_length(row.value.url)===0){            row.value.url = '/archives/'+row.value.slug;        }        useHead({            title: row.value.title,            meta: [                { name: 'description', content: '我的神奇网站。' }            ],            bodyAttrs: {                class: 'test'            },            script: [ { innerHTML: 'console.log(\'Hello world\')' } ]        })    }catch (e) {        loading.value = false;    }}</script><style scoped lang="less"></style>

Answer 1

SEO（搜索引擎优化）主要关注的是网页的源代码内容，因为搜索引擎的爬虫会解析这个源代码来评估网页的内容和结构。在服务器端渲染（SSR）的Nuxt应用中，所有的数据都应该在服务器端获取并注入到页面源代码中，这样爬虫就能抓取到完整的页面内容。

然而，在你的情况中，看起来你正在使用客户端的JavaScript（Vue的mounted钩子）来获取数据，这意味着数据是在页面加载到客户端后异步获取的。这种情况下，爬虫可能无法看到这些数据，因为它们是在页面加载到浏览器后才被获取的。

为了在Nuxt中实现SEO友好的数据获取，你应该在服务器端获取数据，然后将这些数据注入到页面的源代码中。你可以使用Nuxt的asyncData或fetch方法来在服务器端获取数据。

例如，你可以将你的fetchData函数移动到asyncData中，这样它将在服务器端运行，并将数据注入到页面的源代码中：

<script setup lang="ts">import { defineComponent, ref } from 'vue';import { getArticleDetail } from '~/api/article';import type { ArticleItem } from '~/types/interface';import { dateDisplay } from '~/utils/date';import { _length } from '~/utils';defineComponent({  asyncData({ $axios, params }) {    try {      const { data } = await $axios.$get('/api/article/detail', { params: { id: params.id } });      if (data.code !== 0) {        throw new Error(data.message);      }      return { row: data.data as ArticleItem };    } catch (error) {      // 处理错误      console.error(error);      return {};    }  },  setup(props) {    const { row } = props;    // ... 其他代码 ...  }});</script>

在这个例子中，asyncData方法会在服务器端运行，并接收当前页面的路由参数。它使用这些参数来从API获取数据，并将数据作为组件的props返回。这样，数据就可以在服务器端被注入到页面的源代码中，从而可以被搜索引擎爬虫抓取到。

注意，你还需要确保你的API支持服务器端请求，并且没有CORS或其他问题阻止服务器端从API获取数据。

另外，你的nuxt.config.ts中已经设置了ssr: true，这是正确的，它告诉Nuxt应用启用服务器端渲染。只要你在组件中使用asyncData或fetch来获取数据，Nuxt就会确保这些数据在服务器端被获取并注入到页面的源代码中。