close

从 API 中获取数据 Next.js ：利用 getStaticProps 和 getServerSideProps

在开发应用程序的过程中 Next.js，从 API 获取数据是显示动态内容的一个重要方面。 本文将指导您 getStaticProps 在构建过程中使用获取静态数据以及 getServerSideProps 在每个请求上使用 API 获取数据。

使用 getStaticProps

getStaticProps 是一种内置方法 Next.js，支持在构建过程中获取静态数据。 它允许您使用查询的数据创建静态页面，这些数据在部署应用程序之前进行预渲染。 这是使用的基本示例 getStaticProps： 

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

在上面的示例中，我们使用 fetch API 查询数据并将数据作为 props 返回。

使用 getServerSideProps

getServerSideProps 是另一种方法， Next.js 使您能够根据每个请求从 API 获取数据。 这确保了内容始终是最新的和动态的。 这是使用的示例 getServerSideProps： 

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

每次向页面发出请求时，该 getServerSideProps 方法都会从 API 查询数据。

结论

在本部分中，您了解了如何从 Next.js 应用程序中的 API 高效地获取数据。 通过使用 getStaticProps 和 getServerSideProps，您可以在应用程序中灵活地显示静态和动态内容。