为什么我在构建 Next.js SSG 时要发出 api 请求？

Question

我目前的情况是将Next.js v14、PageRouter 和react-query v5 组合为一个项目。

src/pages/index.tsx 的 Home page 组件没有使用 getStaticProps，而是在 build 时将你在 axios 逻辑中写 console.log 的部分输出到了终端。

为什么会这样？

首先是主页组件。

// src/pages/index.tsx

import Innter from "@/components/Innter";

export default function Home() {
  return <Innter />;
}

下一个内部组件是一个包裹在 Suspense 中的测试组件。

// src/components/Innter.tsx

import Image from "next/image";
import { Suspense } from "react";
import Test from "@/components/Test";

function Innter() {
  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24`}
    >
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/pages/index.tsx</code>
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>
      {/* <Test /> */}
      <Suspense fallback={<div>loading...</div>}>
        <Test />
      </Suspense>
      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>
    </main>
  );
}

export default Innter;

接下来，Test组件使用useSuspenseQuery在屏幕上显示api的数据。

// src/components/Test.tsx

import { getHealthCheck } from "@/api/common";
import { useSuspenseQuery } from "@tanstack/react-query";

function Test() {
  const { data } = useSuspenseQuery({
    queryKey: ["test"],
    queryFn: getHealthCheck,
  });
  const testData = data as any;


  return <div>{testData?.message}</div>;
}

export default Test;

最后是axios文件调用api。在这里，我们将在 5 秒内返回响应（用于悬念 Fallbak 测试）

// src/api/common.ts

import { api } from ".";

export const getHealthCheck = async () => {
  try {
    console.log("hey api space!!!");
    const response = await api.get("/core/health_check");
    return new Promise((resolve) => {
      setTimeout(() => resolve(response.data), 5000);
    });
  } catch (error) {
    console.error("Health check failed:", error);
    throw error;
  }
};

这些axios代码中的

console.log ("hey api space!!!")

是在终端build的时候输出的，为什么？？？

我查了Next.js和react-query的官方文档，但没有找到关于在SSG构建期间不使用getStaticProps进行api请求的任何信息。

Answer 1

Suspense 在服务器上运行，但页面路由器不支持流式传输。因此，请求在服务器上运行，但结果永远不会到达客户端。我认为您不能在服务器上的页面路由器中使用悬念查询。