NextJS关于slugs的动态路由问题

时间:2021-05-18 08:27:05

标签: reactjs next.js

我对 nextjs 有疑问..

我正在像这样构建我的网站

pages
   [slug]
      index.jsx
   index.jsx

所以在我的 slug/index 中我正在这样做

export async function getStaticPaths() {
  const resProducts = await fetch(`${process.env.PRIVATE_ENDPOINT}/products`);
  const products = await resProducts.json();
  const paths = products.data.map((p) => ({
    params: {
      slugProduct: p.slug,
    },
  }));
  return {
    // this should be dynamic
    paths,
    fallback: true,
  };
}

我的问题是,如果我在后台添加新产品会发生什么?

我是否必须使用 next build 重建?

1 个答案:

答案 0 :(得分:1)

<块引用>

我的问题是,如果我在后台添加新产品会发生什么? 我是否必须在下一次构建时重新构建?

简短的回答是否定的。如果请求的页面在构建时尚未生成,Next.js 将提供页面的“回退”版本,并在后台静态生成请求的路径 HTML 和 JSON。静态生成完成后,浏览器会收到生成路径的 JSON。对同一路径的后续请求将为生成的页面提供服务,就像在构建时预渲染的其他页面一样。

不要忘记使用 router.isFallback 来检测请求是否处于回退状态。

你可以在这里看到好的文档。

https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation