增量静态生成

1// In getStaticPaths(), you need to return the list of
2// ids of product pages (/products/[id]) that you'd
3// like to pre-render at build time. To do so,
4// you can fetch all products from a database.
5export async function getStaticPaths() {
6  const products = await getProductsFromDatabase();
7
8  const paths = products.map((product) => ({
9     params: { id: product.id }
10  }));
11
12
13  // fallback: true means that the missing pages
14  // will not 404, and instead can render a fallback.
15  return { paths, fallback: true };
16}
17
18// params will contain the id for each generated page.
19export async function getStaticProps({ params }) {
20  return {
21    props: {
22      product: await getProductFromDatabase(params.id)
23    }
24  }
25}
26
27
28export default function Product({ product }) {
29  const router = useRouter();
30
31  if (router.isFallback) {
32    return <div>Loading...</div>;
33  }
34
35  // Render product
36}

1// This function runs at build time on the build server
2export async function getStaticProps() {
3  return {
4    props: {
5      products: await getProductsFromDatabase(),
6      revalidate: 60, // This will force the page to revalidate after 60 seconds
7    }
8  }
9}
10
11// The page component receives products prop from getStaticProps at build time
12export default function Products({ products }) {
13  return (
14    <>
15      <h1>Products</h1>
16      <ul>
17        {products.map((product) => (
18          <li key={product.id}>{product.name}</li>
19        ))}
20      </ul>
21    </>
22  )
23}