以下页面组件位于 src/app/posts/[slug].tsx，这是使用 Next JS 14。对于对 http://localhost:5001/posts 的 api 调用，我特意添加了 5 秒的延迟。因此在 npm r...

以下页面组件位于 src/app/posts/[slug].tsx

这是使用 Next JS 14。

对于该 api 调用 http://localhost:5001/posts ，我特意添加了 5 秒的延迟。

因此在 期间 npm run dev ，它很慢。 很好，正如预期的那样。

但后来我 npm run build 做到了。我得到了此页面的以下内容。

（SSG）预渲染为静态 HTML（使用 getStaticProps）

因此现在当我表演时 npm run start ，我希望这个页面能够立即加载。

但还是有 5 秒的延迟。为什么？我的理解错了吗？

PS：无论是否重新验证都会产生相同的延迟响应。

我在另一个页面中有相同的 api 调用，其中有：

（静态）预渲染为静态内容

它会立即加载，忽略 5 秒的延迟。

仅限以下情况：

（SSG）预渲染为静态 HTML（使用 getStaticProps）

import Link from 'next/link';

type ArticlePageProps = {
  params: { slug: string };
};

async function getArticles() {
  const res = await fetch('http://localhost:5001/posts', { cache: 'no-store' });
  return res.json();
}

async function getArticleByTitle(title: string) {
  const articles = await getArticles();
  return articles.posts.find((article: any) => article.title === title);
}

export async function generateStaticParams() {
  const articles = await getArticles();
  return articles.posts.map((article: { title: string }) => ({
    slug: encodeURIComponent(article.title),
  }));
}

const ArticlePage = async ({ params: { slug }}: ArticlePageProps) => {
  const decodedTitle = decodeURIComponent(slug);
  const article = await getArticleByTitle(decodedTitle);

  if (!article) {
    return <div>Article not found</div>;
  }

  return (
    <div className="max-w-4xl mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6 text-center">Article Details</h1>
      <h2 className="text-xl text-center">{article.title}</h2>
      <p className="font-light text-amber-200 text-center mt-4">{article.summary}</p>
      <div className="mt-8 text-center">
        <Link href="/posts" className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
          Back to Posts
        </Link>
      </div>
    </div>
  );
};

export default ArticlePage;