跳到主要内容

Next.js 客户端数据获取

在 Next.js 中，数据获取是构建动态 Web 应用程序的核心部分。Next.js 提供了多种数据获取策略，包括服务器端渲染（SSR）、静态生成（SSG）和客户端数据获取。本文将重点介绍 客户端数据获取，这是一种在浏览器中动态加载数据的技术，适用于需要频繁更新或用户交互的场景。

什么是客户端数据获取？​

客户端数据获取是指在页面加载完成后，通过 JavaScript 在浏览器中动态获取数据。与服务器端渲染或静态生成不同，客户端数据获取不会在页面初始加载时预取数据，而是在用户与页面交互时按需获取数据。

这种策略特别适合以下场景：

  • 数据频繁更新（如实时聊天或股票价格）。
  • 用户交互触发的数据加载（如点击按钮加载更多内容）。
  • 不需要 SEO 优化的页面（如用户仪表盘）。

如何使用客户端数据获取？​

在 Next.js 中，客户端数据获取通常通过以下方式实现：

  1. 使用 fetch API 或第三方库（如 axios）在组件中发起请求。
  2. 使用 React 的 useEffect 钩子管理数据获取的生命周期。
  3. 使用状态管理工具（如 useState）存储和更新数据。

示例：使用 fetch 和 useEffect 获取数据​

以下是一个简单的示例，展示如何在 Next.js 中实现客户端数据获取：

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

export default function ClientSideFetching() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 在组件挂载后发起请求
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []); // 空依赖数组表示仅在组件挂载时运行

  if (loading) {
    return <p>Loading...</p>;
  }

  if (!data) {
    return <p>No data available</p>;
  }

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

代码解析​

  1. useState：用于管理数据和加载状态。
  2. useEffect：在组件挂载后执行数据获取逻辑。
  3. fetch：发起 HTTP 请求并处理响应。
  4. 条件渲染：根据加载状态和数据是否存在，渲染不同的 UI。
提示

如果你需要处理更复杂的数据获取逻辑（如分页、错误重试等），可以考虑使用 SWR 或 React Query 等数据获取库。

实际应用场景​

场景 1：用户仪表盘​

假设你正在构建一个用户仪表盘，需要在用户登录后动态加载其个人信息和统计数据。由于这些数据是用户特定的，且不需要 SEO 优化，客户端数据获取是一个理想的选择。

场景 2：无限滚动列表​

在社交媒体应用中，用户滚动页面时需要动态加载更多内容。通过客户端数据获取，可以在用户滚动到页面底部时发起请求，加载新的数据并更新列表。

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

export default function InfiniteScrollList() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const loadMore = () => {
    setLoading(true);
    fetch(`https://api.example.com/items?page=${page}`)
      .then((response) => response.json())
      .then((newItems) => {
        setItems((prev) => [...prev, ...newItems]);
        setPage((prev) => prev + 1);
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMore();
  }, []);

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {loading && <p>Loading more items...</p>}
      <button onClick={loadMore}>Load More</button>
    </div>
  );
}

总结​

客户端数据获取是 Next.js 中一种强大的技术，适用于需要动态加载数据的场景。通过结合 fetch API 和 React 钩子，你可以轻松实现按需数据加载，从而提升用户体验。

备注

记住，客户端数据获取不适合 SEO 关键页面，因为搜索引擎爬虫无法执行 JavaScript。

附加资源​

练习​

  1. 修改上面的示例，使用 SWR 库实现客户端数据获取。
  2. 尝试实现一个分页功能，每次加载 10 条数据，并在页面底部显示“加载更多”按钮。