用 Next.js 和 React Query 打造高性能数据流架构

🎯 痛点：为什么前端数据流会失控？

想象一下这个场景：

• 用户点击按钮 → 触发数据更新 → 三个组件需要重新渲染
• 但实际渲染了八个组件，其中五个根本不需要更新
• 页面卡顿，用户怒摔鼠标，产品经理拍桌而起

“这应用怎么这么卡？！”

数据流管理不是可选项，而是保证应用性能的生命线。

---

🧠 架构思路：分层治理

我们要建立三层数据治理体系：

用户操作 → 状态更新 → 精准渲染 → 后台同步
    ↓          ↓           ↓         ↓
  Actions → Store/Query → Component → API

在 Next.js 中，我们可以这样组合：

• 服务端状态：React Query 管理
• 客户端状态：Zustand 管理
• 表单状态：React Hook Form 管理
• URL 状态：Next.js Router 管理

---

💻 代码实战：电商商品列表

1. React Query 数据获取

// hooks/useProducts.js
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

export const useProducts = (filters = {}) => {
  return useQuery({
    queryKey: ['products', filters],
    queryFn: async () => {
      const params = new URLSearchParams(filters)
      const response = await fetch(`/api/products?${params}`)
      if (!response.ok) throw new Error('获取失败')
      return response.json()
    },
    staleTime: 5 * 60 * 1000, // 5分钟缓存
  })
}

// 添加商品 - 自动更新缓存
export const useAddProduct = () => {
  const queryClient = useQueryClient()
  
  return useMutation({
    mutationFn: (newProduct) => 
      fetch('/api/products', {
        method: 'POST',
        body: JSON.stringify(newProduct)
      }),
    onSuccess: () => {
      // 失效并重新获取
      queryClient.invalidateQueries(['products'])
    }
  })
}

2. Zustand 客户端状态

// stores/uiStore.js
import { create } from 'zustand'

export const useUIStore = create((set) => ({
  // 状态
  sidebarOpen: false,
  currentTheme: 'light',
  
  // 动作
  toggleSidebar: () => set((state) => ({ 
    sidebarOpen: !state.sidebarOpen 
  })),
  
  setTheme: (theme) => set({ currentTheme: theme })
}))

3. 组件中的精准消费

// components/ProductList.js
import { useProducts } from '@/hooks/useProducts'
import { useUIStore } from '@/stores/uiStore'

export default function ProductList() {
  // 只订阅需要的状态
  const filters = useUIStore((state) => state.filters)
  const { data: products, isLoading, error } = useProducts(filters)
  
  // 精准控制渲染
  const sidebarOpen = useUIStore((state) => state.sidebarOpen)
  
  if (isLoading) return <ProductSkeleton />
  if (error) return <ErrorMessage error={error} />
  
  return (
    <div className={sidebarOpen ? 'with-sidebar' : 'full-width'}>
      {products.map(product => (
        <ProductCard 
          key={product.id} 
          product={product}
          // 传递稳定引用，避免不必要重渲染
          onAddToCart={useCallback((product) => addToCart(product), [])}
        />
      ))}
    </div>
  )
}

---

🎨 高级模式：乐观更新

提升用户体验的杀手锏：

// hooks/useCart.js
export const useAddToCart = () => {
  const queryClient = useQueryClient()
  
  return useMutation({
    mutationFn: addItemToCart,
    
    // 乐观更新：在请求前立即更新UI
    onMutate: async (newItem) => {
      // 取消正在进行的请求，避免冲突
      await queryClient.cancelQueries(['cart'])
      
      // 保存之前的状态，用于回滚
      const previousCart = queryClient.getQueryData(['cart'])
      
      // 乐观更新
      queryClient.setQueryData(['cart'], (old) => ({
        ...old,
        items: [...old.items, { ...newItem, optimistic: true }]
      }))
      
      return { previousCart }
    },
    
    // 出错时回滚
    onError: (err, newItem, context) => {
      queryClient.setQueryData(['cart'], context.previousCart)
      toast.error('添加失败，请重试')
    },
    
    // 成功时刷新数据
    onSettled: () => {
      queryClient.invalidateQueries(['cart'])
    }
  })
}

---

🔧 性能优化技巧

1. 查询去重与缓存

// 相同查询在5秒内只会发送一次
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 1000,
      cacheTime: 10 * 60 * 1000, // 10分钟缓存
    },
  },
})

2. 分页查询优化

// 预加载下一页
const usePrefetchProducts = (page) => {
  const queryClient = useQueryClient()
  
  useEffect(() => {
    if (page < totalPages) {
      queryClient.prefetchQuery({
        queryKey: ['products', { page: page + 1 }],
        queryFn: fetchProducts,
      })
    }
  }, [page, queryClient])
}

3. 依赖数组优化

// ❌ 错误：每次渲染都创建新对象
useProducts({ category: 'electronics', sort: 'price' })

// ✅ 正确：稳定依赖
const filters = useMemo(() => ({
  category: 'electronics', 
  sort: 'price'
}), [])

useProducts(filters)

---

🚀 实战：搜索过滤 + 分页

// components/ProductDashboard.js
export default function ProductDashboard() {
  const [searchParams, setSearchParams] = useSearchParams()
  
  // URL 作为单一数据源
  const page = parseInt(searchParams.get('page')) || 1
  const category = searchParams.get('category') || 'all'
  const sort = searchParams.get('sort') || 'newest'
  
  // 自动依赖 URL 参数
  const { data, isLoading } = useProducts({ page, category, sort })
  
  // 更新URL，触发重新获取
  const handleFilterChange = (newFilters) => {
    setSearchParams({ ...Object.fromEntries(searchParams), ...newFilters })
  }
  
  return (
    <div>
      <FilterBar 
        filters={{ category, sort }}
        onChange={handleFilterChange}
      />
      
      <ProductGrid products={data?.products} />
      
      <Pagination 
        currentPage={page}
        totalPages={data?.totalPages}
        onPageChange={(newPage) => handleFilterChange({ page: newPage })}
      />
    </div>
  )
}

---

📊 监控与调试

React Query Devtools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyApp />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

自定义 Hooks 监控

// 记录所有数据操作
const useMonitorQueries = () => {
  const queryClient = useQueryClient()
  
  useEffect(() => {
    console.log('当前活跃查询:', queryClient.getQueryCache().getAll())
  }, [queryClient])
}

---

🎯 总结：数据流最佳实践

问题场景	解决方案	收益
重复请求	React Query 去重	减少60%网络请求
不必要渲染	Zustand 选择器 + React.memo	提升渲染性能
状态同步困难	乐观更新	提升用户体验
缓存管理复杂	自动垃圾回收	减少内存泄漏

---

✨ 架构哲学

“优秀的数据流就像城市的交通系统——你看不到它，但能感受到它的顺畅。”

“不要让你的数据像无头苍蝇一样乱撞，用 Next.js + React Query 为它们修建高速公路。”

---

🎁 彩蛋：性能对比图

优化前：
用户点击 → 3个API调用 → 8个组件渲染 → 800ms

优化后：  
用户点击 → 1个API调用（缓存） → 2个组件渲染 → 200ms
        ↓
乐观更新 → 立即响应 → 0ms感知延迟

最终效果：用户觉得你的应用"飞快"，产品经理给你点赞，年终奖翻倍 🚀

---

这种架构模式已经在生产环境中验证，能够支撑百万级用户的高性能应用。记住：好的数据流设计，让复杂应用依然保持简单可维护