各位老铁，大家晚上好！
我是你们的老朋友，那个总是因为网络慢而骂娘的前端工程师。今天我们不聊 CSS 的 Flexbox 怎么布局，也不聊 TypeScript 的类型体操有多难，我们来聊点稍微“高级”一点，但绝对能决定用户体验生死存亡的话题——数据预抓取。
想象一下这个场景：你正在浏览电商网站，手指悬停在“iPhone 15 Pro Max”的购买按钮上，你的大脑已经准备好掏钱了。你轻轻一点。
一秒，两秒。
屏幕闪烁了一下，然后那个该死的加载圈转了三圈。你心想：“我都准备好付钱了，你还给我加载个毛线啊！”
这就是我们要解决的问题。在 React 应用中，路由跳转前的数据预抓取，就是那个能让你在用户点击之前，就把数据悄悄塞进网兜里的魔法。
今天，我们就来聊聊这门手艺，这门能让你从“写代码的”变成“写体验的”手艺。
第一讲：为什么我们需要预抓取？（告别“白屏焦虑症”）
先说个不争的事实：用户没有耐心。
在 2024 年，如果一个页面加载超过 3 秒，50% 的用户会关掉它。而在 SPA（单页应用）的世界里，路由切换通常意味着两个阶段：
- 导航阶段：浏览器卸载旧页面，加载新页面 HTML，执行 JS。
- 渲染阶段：React 挂载新组件，执行
useEffect，发起 API 请求，获取数据。 - 展示阶段：数据到了，组件渲染内容。
这就是著名的“瀑布流”模式。用户点一下 -> 等待 HTML -> 等待 JS -> 等待 API -> 等待渲染。这一连串的等待，就是用户流失的罪魁祸首。
预抓取的目标是什么？消除等待。
它的工作原理是：在用户还没决定点链接的时候（比如鼠标悬停），或者刚决定点的一瞬间，我们就已经把目标页面的数据给拿回来了。当用户真正点击跳转时，数据已经在内存里了，组件只需要直接渲染，0 毫秒延迟。
听起来很美好？确实美好。但这事儿没那么简单。如果你乱抓取，不仅浪费流量，还可能把服务器搞挂了。
第二讲：手动实现——useEffect 的“甜蜜陷阱”
在 React Router 6 之前，或者如果你不想用框架的高级特性，你可能尝试过手动预抓取。
最简单粗暴的方法是什么？在父组件里写个 useEffect。
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
function ProductList() {
const navigate = useNavigate();
useEffect(() => {
// 嘿，我猜用户可能会点这个
// 比如鼠标移上去的时候抓取数据
const timer = setTimeout(() => {
console.log('预抓取数据...');
fetch('/api/product/123').then(res => res.json());
}, 1000);
return () => clearTimeout(timer);
}, []);
const handleDetailClick = (id) => {
// 跳转
navigate(`/product/${id}`);
};
return (
<div>
<h1>热门商品</h1>
<ul>
<li onClick={() => handleDetailClick(1)}>商品 A</li>
<li onClick={() => handleDetailClick(2)}>商品 B</li>
<li onClick={() => handleDetailClick(3)}>商品 C</li>
</ul>
</div>
);
}看起来还行？错！大错特错！这代码里藏着三个致命的 Bug，足以让你的应用变成“抽风”状态。
Bug 1：竞态条件
用户鼠标悬停在“商品 A”上，触发了预抓取。1秒后，用户没点，移到了“商品 B”上。又触发了预抓取。现在，两个请求都在跑。万一用户这时候点了“商品 A”，API 返回的数据是“商品 B”的，而你渲染的是“商品 A”的界面。数据错乱！
Bug 2：重复请求
如果用户在同一个组件里挂了两个预抓取逻辑，或者组件重渲染了，数据会被请求两次。
Bug 3：生命周期管理
组件卸载了怎么办？如果用户没点，直接关了标签页，但网络请求还在跑。这是对服务器资源的浪费。
所以，手动写 useEffect 做预抓取，就像是在没有红绿灯的十字路口指挥交通，容易出事。
第三讲：React Router v6 的原生方案——useFetcher
好，我们进入正题。React Router 6 引入了 useFetcher，这是官方推荐的“正道”。
useFetcher 允许你在组件中发起一个“非导航”的请求。这个请求不会导致路由跳转，也不会触发 useEffect 的生命周期（大部分情况下），但它会触发目标路由的 loader。
这里有一个关键概念：Loader 是路由的“守门员”。
import { useFetcher } from 'react-router-dom';
function ProductList() {
const fetcher = useFetcher();
return (
<div>
<h1>热门商品</h1>
<ul>
{/*
关键点在这里：
使用 fetcher.load() 方法。
它不会导航，只会触发 /product/:id 的 loader 函数。
*/}
<li
onMouseEnter={() => fetcher.load(`/product/${1}`)}
onClick={() => navigate(`/product/${1}`)}
>
商品 A
</li>
</ul>
{/* 如果 fetcher.data 有值了，说明预抓取成功 */}
{fetcher.data && <div>预抓取数据：{fetcher.data.name}</div>}
</div>
);
}但是！ 别急着高兴。fetcher.load 还有一个坑，叫“幽灵请求”。
当你调用 fetcher.load('/path') 时，React Router 会触发该路由的 loader。如果这个 loader 里涉及到了服务器渲染（SSR），或者依赖了某些上下文（比如 cookies），它可能会在后台默默地把数据请求发出去。
如果你在列表页写了十个 fetcher.load，鼠标一晃，十个请求就出去了。这叫“过度抓取”。
怎么优化？
我们需要更智能的控制。不能鼠标一悬停就抓，得等到鼠标真的要动的时候再抓。
import { useState } from 'react';
import { useFetcher } from 'react-router-dom';
function ProductItem({ id, name }) {
const fetcher = useFetcher();
const [isHovered, setIsHovered] = useState(false);
// 只有当鼠标悬停时，才触发请求
// 这是一个典型的“防抖”模式
const handleMouseEnter = () => {
setIsHovered(true);
fetcher.load(`/product/${id}`);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<li
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{name}
{isHovered && fetcher.state === 'idle' && (
<span style={{color: 'green'}}> (已预抓取)</span>
)}
</li>
);
}现在看起来好多了。但这还不够。我们还需要处理数据返回后的渲染逻辑。fetcher.data 只有在请求成功后才有值。
第四讲：架构模式——如何优雅地管理预抓取状态
光会调用 API 还不够，我们需要一套架构来管理这些“幽灵数据”。
我们要把“数据获取逻辑”和“UI 渲染逻辑”分离开来。
模式一：useAsyncResource Hook
我们可以写一个通用的 Hook，专门用来处理这种“预加载但非导航”的数据。
// utils/useAsyncResource.js
import { useState, useEffect } from 'react';
export function useAsyncResource(fetchFn, key) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
// 只有当 key 变化或者你想手动触发时才请求
let cancelled = false;
const execute = async () => {
setLoading(true);
try {
const result = await fetchFn();
if (!cancelled) {
setData(result);
setError(null);
}
} catch (err) {
if (!cancelled) {
setError(err);
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
};
execute();
return () => {
cancelled = true;
};
}, [fetchFn, key]);
return { data, error, loading };
}然后在组件里这样用：
function ProductDetail({ id }) {
// 这里我们用 fetcher 来模拟数据源，或者直接用 axios
const fetcher = useFetcher();
// 核心逻辑：当 fetcher.data 存在时，使用它；否则显示骨架屏
const { data, loading } = useAsyncResource(
async () => {
if (!fetcher.data) throw new Error('No data');
return fetcher.data;
},
[fetcher.data] // 依赖 fetcher.data 的变化
);
return (
<div className="product-detail">
{loading ? <div>加载中...</div> : (
<div>
<h1>{data.name}</h1>
<p>{data.price}</p>
</div>
)}
</div>
);
}等等，这个写法有点绕。我们直接用 React Router 的 useLoaderData 结合 fetcher 会更顺滑。
模式二：useLoaderData 的“双轨制”
React Router 的 useLoaderData 是用来获取导航后数据的。但对于预抓取，我们可以利用 fetcher.data。
这是一个非常优雅的模式：
import { useLoaderData, useFetcher } from 'react-router-dom';
// 1. 定义 Loader（服务器端或路由入口）
// 这个 loader 会被 navigate 触发，也会被 fetcher.load 触发
export async function loader({ params }) {
const response = await fetch(`/api/products/${params.id}`);
if (!response.ok) throw new Error("Failed to fetch");
return response.json();
}
function ProductDetailPage() {
// 2. 获取当前路由的数据（导航后的数据）
const data = useLoaderData();
// 3. 获取预抓取的数据
const fetcher = useFetcher();
const prefetchData = fetcher.data;
// 4. 决策逻辑：谁有数据就用谁
// 如果 fetcher.data 存在，说明预抓取成功，直接用 fetcher.data
// 否则，如果 useLoaderData 存在，说明刚跳转过来，用 useLoaderData
const displayData = prefetchData || data;
return (
<div>
<h1>商品详情</h1>
{fetcher.state === 'loading' ? (
<div>正在从缓存加载...</div>
) : (
<div>
<h2>{displayData?.name}</h2>
<p>价格: {displayData?.price}</p>
</div>
)}
{/* 这里的 load 会在鼠标悬停时触发 */}
<button
onMouseEnter={() => fetcher.load(`/product/${data?.id || '1'}`)}
>
预加载下一页
</button>
</div>
);
}这段代码展示了架构的核心：数据源是同一个（Loader），但获取方式不同（导航 vs 预抓取）。
第五讲：Next.js App Router —— 服务端抓取的艺术
如果你用的是 Next.js 13/14 的 App Router，恭喜你，你站在了食物链的顶端。Next.js 对预抓取的支持是原生的，而且是服务端的。
在 Next.js 中，预抓取通常发生在两个场景：
- Link 组件的
prefetch属性。 - 组件内的数据获取。
1. Link 的 prefetch 智能模式
Next.js 的 <Link> 组件默认开启了 prefetch="viewport"。这意味着，当链接进入视口时，Next.js 会自动抓取该页面的数据。
import Link from 'next/link';
export default function PostList() {
return (
<div>
<Link href="/posts/1" prefetch="viewport">
第一篇博客
</Link>
<Link href="/posts/2" prefetch="viewport">
第二篇博客
</Link>
</div>
);
}这背后发生了什么？
- 浏览器加载 HTML。
- Next.js 运行时检测到 Link 进入视口。
- Next.js 发起一个 fetch 请求（通常是 POST 请求到
/_next/data?path=/posts/1），带上 headers。 - 服务端执行
page.tsx中的async function getData()。 - 数据返回，序列化为 JSON，缓存在内存中。
- 用户点击 -> 数据已经在内存里了 -> 瞬间渲染。
2. 深度定制：useEffect + fetch
Next.js 允许你在客户端组件中手动控制抓取。
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
export default function ProductPage() {
const router = useRouter();
useEffect(() => {
// 我们可以在这里做更复杂的逻辑
// 比如：根据滚动位置决定是否抓取
// 比如：根据网络速度决定是否抓取
const fetchData = async () => {
try {
const res = await fetch('/api/product/123', {
headers: {
// 可以在这里带上一些动态的 headers
'X-Custom-Header': 'some-value'
}
});
const data = await res.json();
// 假设我们把数据存到了全局 store 或者 context
store.dispatch({ type: 'SET_PRODUCT', payload: data });
} catch (error) {
console.error('预抓取失败', error);
}
};
fetchData();
}, []);
return (
<div>正在预加载内容...</div>
);
}注意： 在 Next.js App Router 中，如果你在服务端组件（默认）里做预抓取，通常是利用 Link 组件。如果你在客户端组件里做，必须用 useEffect。
第六讲：进阶架构——如何设计一个“聪明的预抓取器”
光会写代码不够，我们要写架构。一个好的预抓取架构应该具备以下特征：
- 按需抓取：别把整个网站的数据都预抓取了，那内存能爆。
- 并行化：别搞成串行的，我们要的是速度。
- 缓存策略：别每次都请求同一个东西。
- 取消机制：用户点错了，得能取消请求。
让我们来设计一个高阶的 usePrefetch Hook。
// hooks/usePrefetch.js
import { useRef, useCallback } from 'react';
import { useFetcher } from 'react-router-dom';
export function usePrefetch() {
const fetcherRef = useRef(null);
const cancelTokenRef = useRef(null);
const prefetch = useCallback(async (path, params = {}) => {
// 1. 获取 fetcher 实例
// 注意：这里需要确保 fetcher 已经挂载。如果在 useEffect 里调用，可能还没挂载。
// 简化处理，假设在组件顶层调用
if (!fetcherRef.current) {
console.warn('Fetcher not ready');
return;
}
// 2. 取消之前的请求
if (cancelTokenRef.current) {
cancelTokenRef.current.abort();
}
// 创建新的 AbortController
const controller = new AbortController();
cancelTokenRef.current = controller;
// 3. 执行请求
// 这里我们假设 fetcher.load 支持 AbortController
// React Router v6 的 fetcher 没有直接暴露 abort，所以我们通过 loading 状态判断
// 或者我们需要封装一层 fetcher
fetcherRef.current.load(path, {
signal: controller.signal
});
return controller;
}, []);
return { prefetch };
}等等，React Router 的 fetcher.load 并没有直接暴露 AbortSignal 的 API。这意味着我们很难手动取消一个正在进行的 fetcher.load 请求。
那怎么办？
我们利用 fetcher.state。
function useSmartPrefetch() {
const fetcher = useFetcher();
const pendingRequests = useRef(new Set());
const prefetch = useCallback((path) => {
// 如果该路径已经在请求中，直接忽略
if (pendingRequests.current.has(path)) {
console.log(`Already prefetching ${path}`);
return;
}
pendingRequests.current.add(path);
// 触发请求
fetcher.load(path);
// 监听状态变化，请求完成后移除
const unsubscribe = fetcher.subscribe((state) => {
if (state === 'idle') {
pendingRequests.current.delete(path);
unsubscribe();
}
});
}, [fetcher]);
return { prefetch };
}这有点繁琐。让我们换个思路，不依赖框架的 fetcher，直接用原生 fetch 在组件外部做预抓取。
架构模式：服务端边缘缓存
如果你是在 Next.js 或 SSR 环境下，最好的预抓取方式是让服务端去抓取。
你的前端应用不需要知道数据有没有被预抓取。你需要做的是：
- 路由级代码分割：确保预抓取不会阻塞主线程。
- Skeleton Screens（骨架屏）：永远不要让用户看到空白。
// app/products/[id]/page.tsx (Next.js)
export default async function ProductPage({ params }) {
// 这个函数会在 Link prefetch 时被调用
// 也可以在 navigate 时被调用
const product = await getProduct(params.id);
return (
<div className="container">
{/* 即使数据还没回来，这里先渲染骨架屏结构 */}
<div className="skeleton" style={{ width: '100px', height: '100px' }}></div>
<div className="skeleton" style={{ width: '80%', height: '20px' }}></div>
{/* 数据回来后，React 会自动替换掉 Skeleton */}
<h1>{product.name}</h1>
</div>
);
}第七讲：瀑布流的终结者——并行预抓取
这是预抓取架构中最难搞定的部分。通常一个页面不是只依赖一个 API。
场景：
用户在“订单列表”页。
- 列表数据。
- 每个订单项都有一个“查看详情”按钮。
- 点击详情需要：订单详情数据 + 用户余额数据 + 优惠券数据。
糟糕的架构：
// 订单列表页
const fetchOrder = async () => {
const res = await fetch('/api/orders');
return res.json();
};
// 获取订单详情
const fetchOrderDetail = async (id) => {
const res = await fetch(`/api/orders/${id}`);
return res.json();
};
// 获取用户余额
const fetchBalance = async () => {
const res = await fetch('/api/balance');
return res.json();
};
// 渲染循环
orders.forEach(order => {
// 这里会发起 N 个请求，每个请求都会等上一个吗？
// 不，这里是并行发起的，但如果在 useEffect 里顺序写，就是串行
});正确的预抓取架构：
我们需要一个依赖图。当用户鼠标悬停在“订单详情”上时，我们不仅要抓取订单详情，还要抓取它依赖的用户余额。
在 React Router v6 中，我们可以利用 fetcher.submit 配合 Form 的 action。
import { Form, useFetcher } from 'react-router-dom';
function OrderRow({ orderId }) {
const fetcher = useFetcher();
const userFetcher = useFetcher(); // 用户数据用另一个 fetcher
const handleMouseEnter = () => {
// 1. 抓取订单详情
fetcher.load(`/orders/${orderId}`);
// 2. 抓取用户余额（并行）
userFetcher.load('/user/balance');
};
return (
<tr onMouseEnter={handleMouseEnter}>
<td>{orderId}</td>
<td>
{/* 订单数据 */}
{fetcher.data?.items?.map(item => item.name)}
</td>
<td>
{/* 余额数据 */}
{userFetcher.data?.balance}
</td>
<td>
{/* 跳转按钮 */}
<Link to={`/orders/${orderId}`}>查看</Link>
</td>
</tr>
);
}这展示了并行抓取的威力。当用户点击“查看”时，虽然 fetcher 之前的数据可能已经过期（因为我们没点它，只是悬停），但 React Router 的 loader 会再次执行，确保数据是最新的。
但是！ 有个隐患。如果 fetcher.load('/user/balance') 耗时 500ms，而 fetcher.load('/orders/1') 耗时 200ms。
用户悬停 -> 200ms 后订单数据到了 -> 500ms 后余额到了。
如果用户在这 300ms 内点击了“查看”，此时 useLoaderData（导航后的数据）还没生成，而 fetcher.data 还没完全好。这会导致页面闪烁（先显示部分数据，再显示完整数据）。
解决方案：
使用 useRouteLoaderData。
这个 Hook 可以在任何地方读取路由的 loader 数据，不管当前是不是在路由内。
import { useRouteLoaderData } from 'react-router-dom';
function OrderRow({ orderId }) {
// 读取全局的订单详情 loader 数据（假设它是全局共享的）
const orderDetailLoader = useRouteLoaderData('root'); // 假设我们在 root 注册了这个 loader
const userBalanceLoader = useRouteLoaderData('root');
// ...
}这种架构非常强大，它打破了路由的边界，让数据可以在不同组件间共享。
第八讲：性能优化的边界——什么时候不该预抓取？
我们讲了这么多预抓取的好处，但作为资深专家，我必须告诉你：预抓取不是万能药。
-
数据更新频率极高
如果你的数据每秒都在变（比如股票行情、实时聊天），预抓取反而会导致用户看到的数据是旧的。这时候，按需加载（用户点开才加载）才是王道。 -
移动端弱网环境
在 4G 网络下预抓取很爽。但在电梯里、在地下室，预抓取可能会消耗大量流量，甚至触发浏览器的“节流”机制，导致页面卡顿。 -
数据体积巨大
如果一个页面的数据需要 5MB，你预抓取它，用户还没点，后台已经下载了 5MB。这对用户来说是灾难。
最佳实践：
结合智能策略。
const shouldPrefetch = (route, networkSpeed) => {
if (networkSpeed === 'slow') return false;
if (route.dataSize > 1000000) return false; // 1MB
return true;
};第九讲：实战案例——构建一个“秒开”的电商列表
让我们把所有东西串起来。这是一个完整的电商商品列表组件，展示了如何预抓取详情页，以及如何处理并行数据。
文件结构：
routes/home.tsx(列表页)routes/products/$id.tsx(详情页)
1. 路由配置
// routes/products/$id.tsx
import { useLoaderData } from 'react-router-dom';
export async function loader({ params }) {
// 模拟 API 请求
const response = await fetch(`/api/products/${params.id}`);
return response.json();
}
export default function ProductDetail() {
const data = useLoaderData();
return (
<div className="product-detail">
<h1>{data.name}</h1>
<p>{data.price}</p>
<p>{data.description}</p>
</div>
);
}2. 列表页组件
import { Link, useLoaderData, useFetcher } from 'react-router-dom';
import { useState } from 'react';
export async function loader() {
// 获取列表数据
const response = await fetch('/api/products');
return response.json();
}
export default function ProductList() {
const products = useLoaderData(); // 当前列表数据
const fetcher = useFetcher(); // 预抓取用的 fetcher
// 状态管理：用于显示预抓取的进度
const [prefetchedData, setPrefetchedData] = useState({});
const handleMouseEnter = (id) => {
// 触发预抓取
fetcher.load(`/products/${id}`);
};
// 监听 fetcher 的变化
useEffect(() => {
if (fetcher.data) {
setPrefetchedData(prev => ({
...prev,
[fetcher.data.id]: fetcher.data
}));
}
}, [fetcher.data]);
return (
<div>
<h1>商品列表</h1>
<ul>
{products.map(product => (
<li
key={product.id}
onMouseEnter={() => handleMouseEnter(product.id)}
style={{ cursor: 'pointer' }}
>
<Link to={`/products/${product.id}`}>
{product.name}
</Link>
{/* 如果预抓取成功，显示一个小提示 */}
{prefetchedData[product.id] && (
<span style={{ color: 'green', fontSize: '12px' }}>
(已预抓取)
</span>
)}
</li>
))}
</ul>
</div>
);
}3. 优化：防止重复预抓取
上面的代码有个小问题：如果鼠标在同一个元素上晃来晃去，fetcher.load 会一直被调用。
我们可以加一个简单的标记：
const handleMouseEnter = (id) => {
if (prefetchedData[id]) return; // 已经抓取过了，别抓了
fetcher.load(`/products/${id}`);
};4. 终极体验：点击瞬间渲染
现在，当用户点击“商品 A”时，Link 组件会触发导航。
- 浏览器切换 URL。
ProductDetail组件挂载。useLoaderData执行。- 关键点：如果
fetcher.load在点击之前已经成功，React Router 会自动将fetcher.data转移给useLoaderData。 - 用户看到的是：URL 变了，内容已经在那里了。没有闪烁，没有延迟。
第十讲：总结与展望
好了，各位老铁，咱们聊了这么久，从最原始的 useEffect 到 React Router v6 的 fetcher，再到 Next.js 的服务端渲染，我们深入探讨了 React 数据预抓取的方方面面。
回顾一下核心要点：
- 预抓取的本质：是在用户点击之前，把数据准备好。它解决了“导航 -> 等待 -> 渲染”的延迟问题。
- 不要手动裸奔：尽量避免在
useEffect里写复杂的预抓取逻辑，容易出错（竞态条件、内存泄漏）。 - 善用框架：React Router 的
fetcher和 Next.js 的 Link Prefetch 是你的左膀右臂。 - 架构思维：预抓取不仅仅是发个请求，它涉及到数据流、状态管理、并行请求和缓存策略。
- 用户体验：预抓取能带来“秒开”的快感，但要注意不要过度抓取，避免浪费流量和资源。
未来的趋势：
随着 React Server Components（RSC）的普及，预抓取变得更加无缝。数据获取将完全在服务端发生，前端只负责展示。fetcher 和 loader 的界限会越来越模糊，取而代之的是一种“数据即组件”的统一思想。
最后，送大家一句话：
“好的预抓取，就像是你提前买好了电影票，坐在电影院里，等着电影开场的那一刻，你已经是全场最从容的人。”
好了，今天的讲座就到这里。希望大家回去之后，把你们的那个加载圈给扔了，换成预抓取！如果你们在实现过程中遇到什么坑，记得来我的评论区“吐槽”一下，我们下期见！