Next.js 中如何从 API 获取数据

在 Next.js 中，我们通常需要从 API 中获取数据来展示在页面上。本文将介绍如何在 Next.js 中从 API 获取数据，并提供详细的示例代码和指导意义。

什么是 API？

API，即应用程序编程接口，是指软件系统之间的通信接口。在 Web 开发中，API 通常指 Web API，即通过 HTTP 协议提供数据的接口。

Next.js 中如何获取数据？

在 Next.js 中，我们可以使用 getStaticProps 或 getServerSideProps 方法来获取数据。这两个方法都可以在页面渲染之前获取数据，并将数据作为 props 传递给页面组件。

使用 getStaticProps

getStaticProps 方法在构建时执行，只在服务器端运行。它可以从外部数据源获取数据，并将数据作为 props 传递给页面组件。如果数据源不会经常更改，可以使用 getStaticProps 方法来提高性能。

下面是一个使用 getStaticProps 方法获取数据的示例：

// javascriptcn.com 代码示例
export async function getStaticProps() {
  // 从 API 获取数据
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data
    }
  }
}

function Page({ data }) {
  // 使用获取到的数据渲染页面
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  )
}

export default Page

使用 getServerSideProps

getServerSideProps 方法在每次请求时执行，只在服务器端运行。它可以从外部数据源获取数据，并将数据作为 props 传递给页面组件。如果数据源经常更改，可以使用 getServerSideProps 方法来保持数据的实时性。

下面是一个使用 getServerSideProps 方法获取数据的示例：

// javascriptcn.com 代码示例
export async function getServerSideProps() {
  // 从 API 获取数据
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data
    }
  }
}

function Page({ data }) {
  // 使用获取到的数据渲染页面
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  )
}

export default Page

总结

在 Next.js 中，我们可以使用 getStaticProps 或 getServerSideProps 方法来获取数据，并将数据作为 props 传递给页面组件。如果数据源不会经常更改，可以使用 getStaticProps 方法来提高性能；如果数据源经常更改，可以使用 getServerSideProps 方法来保持数据的实时性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d2590d2f5e1655d5799cb