getStaticProps 是否可以在博客中用于在 post 编辑新的 post 时进行更新？

Question

所以我对 getStaticProps 有点困惑。

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

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

Answer 1

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

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

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

本质上，您使用 getStaticProps 告诉 Next.js 生成可能随时间变化的静态页面（或页面集）。因此，您可以拥有包含所有博客 post 的页面，并告诉 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 将创建博客 post 的静态版本，该版本将在 1 天后过期。所以第二天，它将重新生成页面的新静态版本。这样，如果您添加新博客 post，它将在发布当天显示。

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

个人博客 posts 呢？

Next.js 还可以让您添加新博客 post 页面，而无需重建整个站点。为此，您需要创建一个带有动态路由的个人博客 post 页面。

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

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

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

这告诉 Next.js 它可以期待任何东西作为 slug。这样，将来可以添加新博客 post，而无需重建整个站点。

然后，添加您的 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 }
  }
}

Answer 2

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

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

中查看预生成的 html 文件

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

getStaticProps 应该只用于不经常变化的数据。例如，获取博客文章或获取 public 数据。

getStaticProps 是否可以在博客中用于在 post 编辑新的 post 时进行更新？

Can getStaticProps be used in a blog to update when a new post is posted?

next.js

ssg

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

个人博客 posts 呢？