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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 217 天前的主题，其中的信息可能已经有所发展或是发生改变。

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/interface";
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>

seo

ssr

axios

7 条回复 • 2024-05-28 15:24:14 +08:00

bojackhorseman

217 天前

你的数据是组件 mount 后接口请求的，查看源码当然没有啊

shengkai

217 天前

请使用 useAsyncData 或 useFetch ，官网文档( https://nuxt.com.cn/docs/getting-started/data-fetching)还是很清晰的…SSR 的数据获取后水合跟前端获取是不太一样的，你的逻辑是纯前端逻辑…

kingwrcy

217 天前

直接使用 useFetch 在 setup 里面,不要包在 onMounted 里面

sunmoon1983

216 天前

@bojackhorseman
@shengkai
@kingwrcy
只能用 useFetch 吗？ axios 不行？

kingwrcy

216 天前

你都用 Nuxt SSR 了,为什么不遵循官方文档呢?官方推荐使用 useFetch,你使用 axios 还要单独再引入个 axios

图啥呢?

shengkai

216 天前

@sunmoon1983 非要用 axios 也不是不行啊~但是你得在 axios 外面套一层 useAsyncData, 比如：

const data = await useAsyncData('data', () => returen axios.get(url))

研究下官方文档吧，感觉问题都很基础的，看下文档就能解决的…

sunmoon1983

216 天前

@shengkai 嗯，谢谢，我去啃文档了