Next.js 中如何实现异步获取数据？

在 Next.js 中，我们经常需要从后端或第三方 API 中获取数据以渲染页面。在不打断用户体验的情况下，异步获取数据是一个很好的方法。

在本文中，我们将学习如何在 Next.js 中实现异步获取数据。我们将讨论以下内容：

• 使用 getStaticProps 获取静态数据
• 使用 getServerSideProps 获取服务器端生成的每个请求数据
• 在客户端使用 useEffect 和 useState 获取动态数据

使用 getStaticProps 获取静态数据

如果你的应用程序数据是静态的（不经常更改），那么可以使用 getStaticProps 方法从服务器端获取静态数据。getStaticProps 函数在构建时执行，将数据作为 prop 传递给页面组件，因此只有第一次加载页面时才会触发。以下是一个示例：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    }
  }
}

function MyPage({ data }) {
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  )
}

export default MyPage;

在上面的示例中，我们使用 fetch 方法获取数据，并将数据作为 prop 传递给页面组件。在页面组件中，我们使用 map 方法循环遍历数据，并将每条数据渲染为一个段落元素。

getStaticProps 方法需要在页面组件中进行导出，以便 Next.js 使用它来生成静态页面。

使用 getServerSideProps 获取服务器端生成的每个请求数据

如果你的应用程序需要在每个请求时从服务器端动态获取数据，那么可以使用 getServerSideProps 方法。getServerSideProps 函数在每个请求时执行，并将数据作为 prop 传递给页面组件。以下是一个示例：

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/${context.params.id}`);
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}

function MyPage({ data }) {
  return (
    <div>
      {data.title}
    </div>
  );
}

export default MyPage;

在上面的示例中，我们使用 context.params.id 获取包含在 URL 中的 id，并将其用于构建请求 URL。在页面组件中，我们仅渲染一个标题元素。

在客户端使用 useEffect 和 useState 获取动态数据

如果你需要在客户端获取动态数据，并且希望在页面加载后进行加载，则可以使用 useEffect 和 useState 。

import { useState, useEffect } from 'react';

function MyPage() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://api.example.com/data');
      const data = await res.json();

      setData(data);
    }

    fetchData();
  }, []);

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  )
}

export default MyPage;

在上面的示例中，我们使用 useState 和 useEffect 来存储和获取数据。在 useEffect 钩子中，我们使用 fetch 方法获取数据，并使用 setData 更新数据状态。

这种方法可能会在页面加载后导致稍微的“闪烁”，因为它在页面加载后异步获取数据。但是，它可以更好地用于获取动态数据，因为它可以在客户端直接处理数据。

总结

在 Next.js 中异步获取数据是一个有用的技巧，它让我们可以更好地实现应用程序的交互性和动态数据。在本文中，我们学习了如何使用 getStaticProps、getServerSideProps 和 useEffect/useState 三种方法来获取数据。不同的方法适用于不同的数据类型和性质，你可以根据自己的需要选择最合适的方法。

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