8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

即使经过优化构建,页面加载仍然很慢

chevydog 2月前

35 0

以下页面组件位于 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;
帖子版权声明 1、本帖标题:即使经过优化构建,页面加载仍然很慢
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由chevydog在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: