如何在没有运行ning npm 运行 build 命令的情况下在 nextjs 中添加新博客 post 时呈现动态路由

Question

我用 nextjs 开发了一个博客应用程序，在数据库中添加新博客时，它不会使用新路由渲染页面，而是我必须手动执行 npm 运行 build 来预渲染新路由博客。直到那时它一直显示未找到错误。

export async function getStaticPaths() {
  const posts = await service.getAllPosts();
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({
  params,
}: GetStaticPropsContext<{ slug: string }>) {
  const slug = params?.slug as string;

  try {
    const { post } =
      await service.getPost(slug);
    return {
      props: { post },
      revalidate: 10,
    };
  } catch (error) {
    return { props: { post: {}, error: error.message} };
  }
}

const Blog = ({ post }: Props) => {

return <div>
<p>{post.title}
</div>

}

我不确定我做错了什么。

当我添加一个新博客 post 时，我在访问时没有在客户端呈现：https://example.com/blog/new-slug

Answer 1

发生这种情况是因为您正在使用 getStaticProps，只有在构建网站时才会调用它。对于不经常更改的页面很有用。

如果您希望网站在您 post 任何时候更新，您应该使用每次访问页面时都会调用的 getServerSideProps。

或者，如果您不介意 SEO，您也可以进行客户端抓取。

如果要保持静态页面的性能，另一种方法是使用 getStaticProps 中的 revalidate 选项。它告诉页面在一段时间间隔后重建。

如何在没有运行ning npm 运行 build 命令的情况下在 nextjs 中添加新博客 post 时呈现动态路由

How to render dynamic route when a new blog post is added in nextjs without running npm run build command

javascript

reactjs

next.js

server-side-rendering

如何在没有 运行ning npm 运行 build 命令的情况下在 nextjs 中添加新博客 post 时呈现动态路由

How to render dynamic route when a new blog post is added in nextjs without running npm run build command

javascript

reactjs

next.js

server-side-rendering

如何在没有运行ning npm 运行 build 命令的情况下在 nextjs 中添加新博客 post 时呈现动态路由