Next.js 9.3 中 getStaticProps、getStaticPaths 和 getServerSideProps的新特性概述

2023-10-10 22:43:32

在 Next.js 9.3 中，我们对数据获取和页面渲染进行了重大改进。我们更新了 getStaticProps、getStaticPaths 和 getServerSideProps API，以提供更大的灵活性、对动态数据的更好支持以及更强大的路由支持。

更新的 getStaticProps 和 getStaticPaths API

在 Next.js 9.3 中，getStaticProps 和 getStaticPaths API 已经过更新，以支持动态数据。这意味着您现在可以从外部数据源（如数据库或 API）获取数据，并在构建时将其静态呈现到您的页面中。

要使用动态数据，您需要在您的页面中使用动态路由。动态路由允许您在路由中使用参数，以便您可以从 URL 中获取数据。例如，您可以使用以下动态路由来获取特定产品的详细信息：

/products/[productId]

然后，您可以在您的页面中使用 getStaticProps 函数来从 API 中获取产品详细信息，并将其静态呈现到页面中。

export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.productId);

  return {
    props: {
      product,
    },
  };
}

新的 getServerSideProps API

Next.js 9.3 还引入了新的 getServerSideProps API。getServerSideProps API 允许您在每次请求时在服务器端渲染您的页面。这意味着您可以从外部数据源（如数据库或 API）获取数据，并在每次请求时将其动态呈现到您的页面中。

要使用 getServerSideProps API，您需要在您的页面中使用它。

export async function getServerSideProps(context) {
  const product = await fetchProduct(context.params.productId);

  return {
    props: {
      product,
    },
  };
}

更强大的路由支持

Next.js 9.3 还提供了更强大的路由支持。现在，您可以使用动态路由、嵌套路由和可选路由来创建更复杂的应用程序。

要使用动态路由，您需要在您的页面文件中使用动态路由语法。例如，您可以使用以下动态路由来获取特定产品的详细信息：

/products/[productId]

要使用嵌套路由，您需要在您的 pages 文件夹中创建子文件夹。例如，您可以创建一个名为 products 的子文件夹，并在其中创建 product.js 页面。然后，您可以在 product.js 页面中使用以下嵌套路由来获取特定产品的详细信息：

[productId]

要使用可选路由，您需要在您的动态路由中使用问号 (?)。例如，您可以使用以下可选路由来获取特定产品的详细信息，但如果该产品不存在，则显示 404 页面：

/products/[productId?]

对动态数据的改进处理

Next.js 9.3 还对动态数据的处理进行了改进。现在，您可以使用 useSWR 钩子从外部数据源获取数据，并在您的页面中动态呈现该数据。

要使用 useSWR 钩子，您需要在您的页面中安装 swr 包。

npm install swr

然后，您可以在您的页面中使用 useSWR 钩子来从外部数据源获取数据。

import useSWR from 'swr';

export default function ProductDetails() {
  const { data, error } = useSWR(`/api/products/${productId}`);

  if (error) return <div>Error</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}