Nuxt 3 SSR 确实在客户端而不是服务器端执行 XHR

Question

我已经开始构建一个 Nuxt 3 项目。 Nuxt 的一大优势是它支持开箱即用的 SSR，这对 SEO 来说是一大优势。这是因为整个页面在服务器端呈现，用户以及 Googlebot 获得包含所有数据的完全呈现的页面。

但是，我无法建立这样的基础设施。我用 PHP 和 Laravel 框架编写了我的 API 后端。这是通过域

backend.test

上的代客运行的。现在我希望我的 Nuxt 3 应用程序向以下 API 端点发出请求

https://backend.test/api/v1/products

以及 API 如何检索所有产品的列表。

这也有效，但关键是用户得到的是一个空的 HTML 文件，而不是服务器端呈现的已经包含产品的 HTML 文件。因此，客户端实际上是在执行对 API 端点的 XHR 请求。但这不是我想要存档的。我想让页面由服务器呈现。

这是我的

List.vue

文件，它应该返回所有产品的 HTML 列表：

<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>

如您所见，我还添加了参数

server: true

默认情况下为 true 以明确告诉 Nuxt 他应该在服务器上渲染它，但他仍然没有。

我的

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

文件中添加了

nuxt.config.ts

，默认情况下已经是这样，但我仍然看到客户端发出XHR请求。

我在这里做错了什么？

我还有第二个问题： 当我从

key: Date.now().toString(),

中删除

useFetch

时，我的 API 数据不会在每次页面刷新时加载，而是在等待 5-10 秒后加载。这是为什么？

亲切的问候