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

生命周期问题。 onMounted 里面的请求不会在 SSR 阶段发起。

• Data fetching · Get Started with Nuxt
• Lifecycle Hooks · Nuxt API

Nuxt 2 - Nuxt Lifecycle 这样有演示的生命周期的文档没有在Nuext3里面找到，但是看2的也是一样的。