可以在博客中使用 getStaticProps 在发布新帖子时进行更新吗？答案

【问题标题】：Can getStaticProps be used in a blog to update when a new post is posted?可以在博客中使用 getStaticProps 在发布新帖子时进行更新吗？
【发布时间】：2021-05-23 10:47:27
【问题描述】：

所以我对getStaticProps 有点困惑。

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

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

【问题讨论】：

标签： next.js ssg

【解决方案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 }
  }
}

【讨论】：

顺便说一句，问题标题包括getServerSideProps。

【解决方案2】：

使用静态生成，您可以在构建时预先生成页面。构建应用程序时会准备好数据和页面。部署应用程序后，页面可以由服务器缓存，由 CDN 缓存，因此可以立即处理传入的请求。那些服务的页面仍然由 React 应用程序补充。

getStaticProps 告诉 Next.js 我们要预先生成这个页面。因此，您应该仅在页面内调用此异步函数，并且您在 getStaticProps 中编写的代码不会包含在发送到客户端的代码包中。项目中的.next 文件夹包含生产就绪代码，因此您可以在server/pages 中查看预生成的 html 文件

getStaticProps 在构建期间执行，但这不是唯一一次执行。增量静态生成意味着，您不仅会在构建时静态生成页面，而且即使在部署之后也会持续更新而无需重新部署。您在“x”秒后预生成页面，新创建的页面将替换旧页面。所以你可以在服务器上进行持续的预渲染。对于数据一直在变化的高度动态变化，您可以在很短的时间间隔内重新验证。但是在开发过程中，无论您输入什么值进行重新验证，您的页面都会在每个请求中预先生成。

getStaticProps 只能用于不经常更改的数据。例如，获取博客文章或获取公共数据。

【讨论】：