Nuxt3 SSR未在服务端执行XHR请求及缓存异常问题咨询

问题背景 #

我正在搭建Nuxt3项目，希望利用它原生支持的SSR（服务端渲染）特性优化SEO——页面在服务端完整渲染，确保用户及Googlebot能获取包含全部数据的完整HTML。但目前遇到两个核心问题：

问题1：SSR未生效，接口请求在客户端执行 #

后端基于PHP+Laravel开发，通过Valet运行在backend.test域名，Nuxt3应用需要请求https://backend.test/api/v1/products接口展示产品列表。当前请求能成功获取数据，但用户收到的是不含产品数据的空HTML文件，实际接口请求是在客户端通过XHR发起的，不符合SSR预期。

相关代码文件 #

• List.vue：

<script setup>
const { data: products } = await useFetch(
  "https://backend.test/api/v1/products?order_by=newest&expired=1&type[0]=DEAL",
  {
    key: Date.now().toString(),
    server: true,
  }
);
</script>

<template>
  <div>
    <p>Product List</p>
    {{ products }}
    <!--
    <div v-if="pending" class="grid grid-cols-4 gap-5">
      <div v-for="product in products">
        <div>{{ product }}</div>
      </div>
    </div>
    <div v-else>Loading!</div>
    -->
  </div>
</template>

• index.vue：

<template>
  <div>
    <h1>Index</h1>
    <p>Index page</p>
    <List />
  </div>
</template>

• app.vue：

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

• nuxt.config.ts：

export default defineNuxtConfig({
  modules: [
    "@nuxtjs/eslint-module",
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@nuxt/devtools",
    "@nuxtjs/html-validator",
  ],
  css: ["~/assets/css/main.scss"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  ssr: true // 显式开启默认已启用的SSR配置
});

我已显式设置useFetch的server: true参数，也在nuxt.config.ts中添加了默认已开启的ssr: true，但仍未触发服务端渲染。

问题2：移除useFetch的key参数后，数据刷新延迟 #

当移除useFetch配置中的key: Date.now().toString()参数后，页面刷新时不会立即加载API数据，需要等待5-10秒才会显示更新后的内容，这是什么原因？

内容的提问来源于stack exchange，提问作者Jan