Question

所以我对 getStaticProps 有点困惑。

getStaticProps 在构建时运行以生成静态页面。

我的问题是，如果我有一个在发布新帖子时更新的博客，我不应该使用 getStaticProps 对吗？因为它只在构建时被调用，而不会被调用来获取新的可用帖子。在这种情况下，我应该使用 getServerSideProps 或 fecth 数据客户端和 useSWR 对吗？

Answer 1

在 Next.js 中，最好将 getStaticProps 视为创建静态网页的一种方式。不一定是在初始构建期间预先构建的页面。

因此，如果您使用 incremental static regeneration，则可以在博客文章页面上使用 getStaticProps。

什么是“增量静态再生”？

本质上，您使用 getStaticProps 来告诉 Next.js 生成可能随时间变化的静态页面（或页面集）。因此，您可以拥有包含所有博客文章的页面，并告诉 Next.js 它可能每天更新。

// posts.js

export const getStaticProps = async () => {
  const blogPosts = await getAllBlogPosts()
  return {
    props: { blogPosts },
    revalidate: 60 * 60 * 24 // 1 day in seconds
  }
}

这样，Next.js 将创建一个静态版本的博客文章，该版本会在 1 天后过期。因此，第二天，它将重新生成页面的新静态版本。这样，如果您添加新的博文，它将在发布之日显示。

我建议查看有关此主题的文档，因为它包含更多详细信息：https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

个人博客帖子呢？

Next.js 还可以让您添加新的博客文章页面，而无需重建整个站点。为此，您需要使用动态路由创建一个单独的博客文章页面。

首先，在 posts/[slug].js 中创建一个页面。这是一条动态路径，您可以在其中将 slug 连接到单个博客文章。

然后，添加 getStaticPaths 函数。确保将回退设置为 true 或 blocking。文档更详细地说明了差异。

export const getStaticPaths = async () => {
  return {
    paths: []
    fallback: 'blocking'
  }
}

这告诉 Next.js 它可以将任何东西视为 slug。这样，将来就可以添加新的博客文章，而无需重建整个网站。

然后，添加您的 getStaticProps 函数以向页面提供详细信息。

export const getStaticProps = async (context) => {
  const post = await getPostBySlug(context.params.slug)
  if(!post) return { redirect: '/posts', permanent: false } // redirect to main blog posts page if post doesn't exist, or any other page you want

  return {
    props: { post }
  }
}

Nextjs getStaticProps 和 getServerSideProps

1 个答案:

什么是“增量静态再生”？

个人博客帖子呢？