Next.js用户查询场景数据获取：用useSWR还是fetch/axios搭配useEffect？

现有代码的正确性 #

你当前的写法属于useSWR的合法用法：useSWR默认会在传入的第一个参数（请求key/地址）为假值时自动跳过请求，你初始将address设为空字符串，仅在用户提交表单后才赋值合法接口地址，刚好匹配「提交后才触发查询」的业务逻辑，功能层面没有问题。

useSWR比fetch+useEffect更适配该场景 #

在Next.js客户端搜索场景下，useSWR的优势远大于手动封装fetch+useEffect：

• 自带缓存能力：相同查询参数的重复搜索会直接读取本地缓存，不会重复发起网络请求，性能体验更好
• 内置状态管理：不需要手动维护loading、error等状态变量，useSWR直接返回对应状态字段，减少冗余代码
• 扩展能力更强：后续如果需要新增断网重试、后台刷新、防抖查询等能力，仅需修改useSWR配置即可，不需要额外手写逻辑

现有代码的优化建议 #

可以简化状态逻辑，避免维护多余的address变量，同时增加合法性校验和状态提示，优化后的参考代码如下：

export default function SearchBar() {
  const [query, setQuery] = useState("");
  // 单独维护提交后才生效的搜索参数，避免输入过程中触发无效请求
  const [validQuery, setValidQuery] = useState("");
  const fetcher = async (url) => await axios.get(url).then((res) => res.data);
  
  // 仅当validQuery有值时才发起请求
  const { data, error, isLoading } = useSWR(
    validQuery ? `https://jsonplaceholder.typicode.com/todos/${validQuery}` : null,
    fetcher
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    const trimedQuery = query.trim();
    if(trimedQuery) setValidQuery(trimedQuery);
  };

  if (error) return <div>查询出错，请稍后重试</div>;

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <Input
          type="text"
          onChange={(e) => setQuery(e.target.value)}
          value={query}
        />
        <SearchButton type="submit">搜索</SearchButton>
      </Form>
      {isLoading && <div>加载中...</div>}
      {/* 搜索结果渲染 */}
      {data && <div>查询结果：{JSON.stringify(data)}</div>}
    </>
  );
}

仅当满足以下条件时可考虑用fetch+useEffect #

如果你的搜索场景极其简单，不需要缓存、不需要重试机制、后续也没有扩展交互的规划，且仅需要单次请求逻辑，才考虑用fetch+useEffect实现，否则长期维护成本远高于使用useSWR。

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