5

所以我有点困惑getStaticProps。

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

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

4

2 回答 2

19

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

所以如果你使用增量静态再生，你可以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 }
  }
}
于 2021-02-20T18:35:17.350 回答
0

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

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

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

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

于 2021-10-31T21:39:44.897 回答