0

我想将我的用户引导到一个页面，在那里他们可以根据他们的公民身份号码获得折扣。我将使用他们的身份证号码来确定他们获得的折扣金额。我可以使用他们的 id 来确定位置、年龄、性别等。

他们可以路由到mywebsite.com/megadiscount并在一个框中填写他们的 ID 号码，然后找出他们可以获得多少折扣。但现在的问题是，我还希望他们能够获得指向mywebsite.com/megadiscount/[id number]的链接，以了解他们可以获得多少折扣。

因此，使用 NextJS，我知道我可以创建megadiscount/index.js并megadiscount/[id].js从 url 中捕获 id。

问题是megadiscount/[id].js我必须指定getStaticPaths我将生成的 id 页面，但问题是我不知道这些 id 将是什么。

我的megadiscount/[id].js文件看起来像这样

const Page = ({discount}) => {
  return (
    <>
      <h1>You get a discount of : {discount}%</h1>
    </>
  )
}


export async function getStaticPaths() {

  return {
    paths: [], // I don't know what these will be
    fallback: false,
  };
}

export async function getStaticProps(context) {
  const { slug = "" } = context.params;
  const discount = fetchDiscountFromServer(slug)
  return {
    props: {
      discount
    },
  };
}

export default Page;
4

1 回答 1

1 
export default function Page({ discount }) {
  return (
    <>
      <h1>You get a discount of : {discount}%</h1>
    </>
  );
}

export async function getStaticProps({ params: { id } }) {
  //Featch your discount based on id
  const discount = await fetchDiscountFromServer(id);
  return {
    props: { discount },
  };
}
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: "blocking",
  };
}

NextJS 为这种情况提供了 fallback:"blocking"。查看文档

但在我看来，你应该考虑一下SSR这种情况。这将为每个用户生成一个静态页面，这很好，但是如果您经常更改折扣，您必须设置一个较低的revalidate:1 值，但这仍然不是实时的。

于 2021-06-02T11:16:19.930 回答