跳到主要内容

Next.js fetch API

在现代 Web 开发中，数据获取是一个至关重要的环节。Next.js 提供了多种数据获取方法，其中 fetch API 是最常用的一种。本文将详细介绍如何在 Next.js 中使用 fetch API 获取数据，并通过实际案例展示其应用场景。

什么是 fetch API？​

fetch API 是一个现代的网络请求接口，用于从服务器获取资源。它基于 Promise，提供了更简洁、更强大的功能，替代了传统的 XMLHttpRequest。在 Next.js 中，fetch API 可以用于客户端和服务器端的数据获取。

在 Next.js 中使用 fetch API​

基本用法​

在 Next.js 中，fetch API 的使用方式与在普通 JavaScript 中类似。以下是一个简单的示例，展示了如何在 Next.js 页面组件中使用 fetch API 获取数据：

javascript
import { useEffect, useState } from 'react';

export default function HomePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

在这个示例中，我们使用 useEffect 钩子在组件挂载时发起 fetch 请求，并将获取到的数据存储在组件的状态中。如果数据尚未加载完成，页面会显示 "Loading..."。

服务器端数据获取​

Next.js 支持在服务器端获取数据，这可以通过 getServerSideProps 函数实现。以下是一个示例：

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

  return {
    props: {
      data,
    },
  };
}

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

在这个示例中，getServerSideProps 函数在服务器端运行，获取数据并将其作为 props 传递给页面组件。这样，页面在渲染时就已经包含了所需的数据。

静态生成时的数据获取​

Next.js 还支持在构建时获取数据，这可以通过 getStaticProps 函数实现。以下是一个示例：

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

  return {
    props: {
      data,
    },
  };
}

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

在这个示例中，getStaticProps 函数在构建时运行，获取数据并将其作为 props 传递给页面组件。这样，页面在构建时就已经包含了所需的数据，适合用于静态站点生成。

实际应用场景​

动态内容加载​

假设你正在开发一个博客网站，需要在页面加载时从服务器获取最新的文章列表。你可以使用 fetch API 在客户端或服务器端获取数据，并将其渲染到页面上。

javascript
import { useEffect, useState } from 'react';

export default function BlogPage() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data))
      .catch(error => console.error('Error fetching posts:', error));
  }, []);

  if (!posts.length) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

用户认证​

在用户认证场景中，你可能需要在用户登录后从服务器获取用户信息。你可以使用 fetch API 在客户端获取用户信息，并将其存储在状态中。

javascript
import { useEffect, useState } from 'react';

export default function UserProfilePage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/user', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
      },
    })
      .then(response => response.json())
      .then(data => setUser(data))
      .catch(error => console.error('Error fetching user:', error));
  }, []);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

总结​

fetch API 是 Next.js 中获取数据的强大工具，适用于客户端、服务器端和静态生成的数据获取场景。通过本文的介绍和示例，你应该已经掌握了如何在 Next.js 中使用 fetch API 获取数据，并了解了其在实际项目中的应用。

附加资源​

练习​

  1. 尝试在 Next.js 项目中使用 fetch API 获取一个公开的 API 数据，并将其渲染到页面上。
  2. 修改示例代码，使其在服务器端获取数据，并比较与客户端获取数据的区别。
  3. 探索 fetch API 的其他选项，如 headers、method 等，并尝试在请求中使用它们。

通过实践这些练习，你将更深入地理解 fetch API 在 Next.js 中的应用。