编辑“︁Next.js客户端数据获取”︁

= Next.js客户端数据获取 =

'''Next.js客户端数据获取'''是指在浏览器环境中（而非服务器端）动态获取数据的技术。这种策略适用于需要在用户交互后更新内容、无需SEO优化或需要访问浏览器API（如<code>localStorage</code>）的场景。本文将详细介绍其实现方式、适用场景及最佳实践。

== 核心概念 ==

Next.js支持多种数据获取策略，客户端数据获取是其中一种，特点如下：
* '''执行环境'''：代码在浏览器中运行
* '''适用场景'''：
  * 用户交互触发的数据更新（如搜索框输入）
  * 个性化内容（依赖用户登录状态）
  * 实时数据（如股票行情）
* '''优势'''：
  * 减少服务器负载
  * 快速响应用户操作
  * 可访问浏览器API
* '''局限性'''：
  * 不利于SEO
  * 初始加载可能显示空白状态

== 实现方法 ==

Next.js提供三种主要客户端数据获取方式：

=== 1. useEffect + fetch ===

最基础的实现模式，使用React的<code>useEffect</code>配合原生<code>fetch</code>：

<syntaxhighlight lang="javascript">
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Fetch error:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组表示仅运行一次

  if (loading) return <div>Loading...</div>;
  if (!data) return <div>No data found</div>;

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
</syntaxhighlight>

'''代码解析'''：
* <code>useEffect</code>在组件挂载后执行
* <code>fetch</code>发起网络请求
* 三种状态处理：加载中/错误/成功

=== 2. SWR（Stale-While-Revalidate） ===

Next.js推荐的数据获取库，提供缓存、重试等高级功能：

<syntaxhighlight lang="javascript">
import useSWR from 'swr';

const fetcher = (...args) => fetch(...args).then(res => res.json());

function Profile() {
  const { data, error, isLoading } = useSWR(
    '/api/user', 
    fetcher,
    {
      revalidateOnFocus: false, // 禁用窗口聚焦时重新验证
    }
  );

  if (error) return <div>Failed to load</div>;
  if (isLoading) return <div>Loading...</div>;
  
  return <div>Hello {data.name}!</div>;
}
</syntaxhighlight>

'''特性对比'''：
{| class="wikitable"
|-
! 功能 !! useEffect+fetch !! SWR
|-
| 缓存 | ❌ 无 | ✅ 自动
|-
| 错误重试 | 手动实现 | ✅ 自动
|-
| 聚焦重新验证 | 手动实现 | ✅ 可配置
|}

=== 3. React Query ===

企业级解决方案，适合复杂状态管理：

<syntaxhighlight lang="javascript">
import { useQuery } from '@tanstack/react-query';

const fetchUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

function UserComponent() {
  const { 
    data: user,
    isLoading,
    isError
  } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser
  });

  // ...渲染逻辑同前例
}
</syntaxhighlight>

== 性能优化 ==

客户端数据获取需注意以下优化策略：

=== 数据预加载 ===
在可能触发操作前预先加载资源：
<syntaxhighlight lang="javascript">
// 鼠标悬停时预加载
function Link({ href }) {
  const preloadData = () => {
    // 预加载逻辑
  };

  return (
    <a href={href} onMouseEnter={preloadData}>
      Hover to preload
    </a>
  );
}
</syntaxhighlight>

=== 请求去重 ===
使用相同URL的并行请求应合并：
<mermaid>
graph TD
    A[组件A发起请求] --> C[缓存层]
    B[组件B发起相同请求] --> C
    C --> D[实际网络请求]
</mermaid>

=== 分页加载 ===
大数据集采用无限滚动或分页：
<syntaxhighlight lang="javascript">
const { data, fetchNextPage } = useInfiniteQuery({
  queryKey: ['items'],
  queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextPage,
});
</syntaxhighlight>

== 实际案例 ==

'''电商网站商品筛选'''：
1. 用户选择价格范围滑块
2. 客户端发送过滤请求
3. 动态更新商品列表而不刷新页面

'''实现代码片段'''：
<syntaxhighlight lang="javascript">
function PriceFilter() {
  const [priceRange, setPriceRange] = useState([0, 100]);
  const { data } = useSWR(
    `/api/products?min=${priceRange[0]}&max=${priceRange[1]}`, 
    fetcher
  );

  return (
    <div>
      <input 
        type="range" 
        onChange={(e) => setPriceRange([e.target.value, priceRange[1]])}
      />
      {/* 商品列表渲染 */}
    </div>
  );
}
</syntaxhighlight>

== 错误处理 ==

完善的客户端数据获取应包含以下错误处理机制：
* 网络错误重试（指数退避算法）
* 超时处理
* 优雅降级UI

'''示例实现'''：
<syntaxhighlight lang="javascript">
const { data } = useSWR('/api/data', fetcher, {
  onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
    if (retryCount >= 3) return;
    if (error.status === 404) return;
    
    setTimeout(() => revalidate({ retryCount }), 5000);
  }
});
</syntaxhighlight>

== 数学原理 ==

对于重试机制，常用'''指数退避'''算法计算延迟时间：

<math>
t = min(2^n \times base, max)
</math>

其中：
* <math>t</math> = 实际延迟时间
* <math>n</math> = 当前重试次数
* <math>base</math> = 基础延迟（如1000ms）
* <math>max</math> = 最大延迟阈值

== 总结 ==

客户端数据获取是Next.js应用的重要组成部分，适用于：
* 用户交互驱动的动态内容
* 个性化/实时数据展示
* 浏览器API集成场景

选择合适工具时参考：
* 简单场景：<code>useEffect + fetch</code>
* 中等复杂度：SWR
* 企业级应用：React Query

始终考虑：
✅ 错误边界处理
✅ 加载状态管理
✅ 性能优化策略
❌ 避免在需要SEO的关键路径使用

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]