Next.js中SWR fallback选项实用示例及相关问题解答

一、核心疑问解答 #

• 1. 官方示例为何用'/api/article'作为key？
  这个key是SWR用来缓存、识别请求的唯一标识，同时会作为参数传给你定义的fetcher函数。官方示例里的/api/article是Next.js的API路由（对应pages/api/article.js文件），作用是作为服务端中间层：既可以避免前端直接调用外部API的跨域问题，还能做数据过滤、鉴权等前置处理。

• 2. useSWR钩子是否会通过该key跳转到对应地址？
  不是“跳转”，而是把key作为请求参数传给fetcher。比如你用fetch当fetcher，key就会成为fetch的第一个参数（请求地址），由fetcher发起HTTP请求获取数据。SWR本身只负责缓存、后台重新验证等逻辑，请求的实际发送是fetcher完成的。

• 3. 能否使用外部API（比如jsonplaceholder）？
  完全可以。直接把外部API的完整URL作为key传给useSWR即可，比如：

  useSWR("https://jsonplaceholder.typicode.com/posts", fetcher)
  

  如果遇到跨域问题，要么让外部API开启CORS，要么用Next.js的API路由做代理转发。

• 4. fallback对象中应填入什么值？
  fallback是给SWR提供初始数据的，它的键必须和useSWR的key完全匹配，值要和该key对应的请求返回数据结构一致。比如你请求/api/hello会返回{name: "xxx"}，那fallback就填{"/api/hello": {name: "初始用户名"}}。

二、你的代码问题分析 #

你代码里fallback的foo bar短暂显示后变成John Doe，是SWR的正常行为：fallback只是临时初始数据，组件挂载后SWR会自动用fetcher请求/api/hello接口，接口返回的John Doe会替换掉初始值。

如果想让初始数据不被替换，可以关闭自动重新验证（设置revalidateOnMount: false），但这不符合fallback的设计初衷——它本来就是用来做预渲染或临时占位的，不是永久默认值。

实用修正示例（结合Next.js SSG） #

下面是Next.js中用SSG预获取外部API数据，再传给SWR fallback的典型场景：

// pages/posts.js
import useSWR from 'swr';

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

export default function Posts({ fallbackData }) {
  const { data, error } = useSWR(
    'https://jsonplaceholder.typicode.com/posts',
    fetcher,
    { fallback: { 'https://jsonplaceholder.typicode.com/posts': fallbackData } }
  );

  if (error) return <div>加载失败</div>;
  
  // 因为有fallback，data不会是undefined，直接渲染预获取的内容
  return (
    <div className="posts-list">
      {data.map(post => (
        <article key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </article>
      ))}
    </div>
  );
}

// 构建时预获取外部API数据，作为fallback传入组件
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const fallbackData = await res.json();

  return { props: { fallbackData } };
}

这个示例里，用户打开页面会直接看到预渲染的文章内容，同时SWR在后台悄悄重新验证数据，有更新时自动刷新页面，兼顾了首屏速度和数据新鲜度。

三、fallback的适用场景 #

• Next.js SSG/SSR预渲染：在构建或请求时预获取数据，让用户打开页面即有内容，同时用SWR保持数据实时性。
• 避免加载态闪烁：用结构一致的初始数据替代骨架屏，比如默认用户名、占位文本，提升用户体验。
• 离线备用数据：结合SWR的缓存机制，fallback可以作为离线时的展示内容，让无网络用户也能看到历史数据。

四、常见理解误区修正 #

• 不要把fallback当成“永久默认值”：它只是临时初始数据，SWR默认会自动发起请求更新数据。
• fallback的key必须完全匹配：比如/api/posts?page=1和/api/posts是两个不同的key，fallback要对应准确。

内容的提问来源于stack exchange，提问作者Joe