【转】React-Query：啥都没干，就被淘汰了？

大家好，我卡颂。

有一句话相信大家都听过：

取代泡面的，并不是更高级的泡面，而是外卖的兴起

在前端领域，也存在同样的现象。作为前端缓存库中的佼佼者，React-Query一直拥有大量受众，官方推出的React-Query课程都卖出了8w+份。

但就是这样一款能打的产品，居然有被淘汰的风险，这究竟是为什么？

本文参考了文章You Might Not Need React Query

欢迎加入人类高质量前端交流群，带飞

前端缓存库的本质

React-Query的定位是前端缓存库。如果从前端的视角来理解这个库，可能会认为它是axios加强版。

但要理解这个库的本质，其实需要我们从后端的视角出发。

在后端看来，后端负责提供数据，前端负责展示数据，那么：

• 数据更新后，前端应该如何渲染？
• 数据失效后，前端应该如何渲染？

本质来说，这是个数据/缓存同步的问题，只不过在SPA时代，这个问题刚好交给前端解决而已。

但是，后端天生离数据更近，解决这个问题更有优势。所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。

总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。

SSR技术的更迭

这里说的渲染任务逐渐移向后端就是指SSR（服务端渲染）。但是，SSR出现很多年了，为什么之前没有说要取代React-Query？

这是因为，传统的SSR主要应用在数据的首屏渲染。当首屏渲染完成，数据的后续同步操作还是发生在前端。

所以，React-Query还是有用武之地。

类似的，在全栈框架Next.js中，也推荐在CSR（客户端渲染）时使用同团队开发的缓存库SWR用于数据的同步操作。

但是，随着SSR框架开始支持序列化数据，这一切都变了。

序列化数据的意义

在React中，对于如下JSX：

const name = "卡颂";
<p>你好，{name}</p>

在传统SSR中，经由后端处理后，传递给前端的是如下HTML结构：

<p>你好，卡颂</p>

HTML结构可以直接渲染，很方便，但也失去了灵活性（不好更新）。

所以传统SSR主要应用在首屏渲染这样的一次性过程。

在React Server Component中，同样的JSX结构经由后端序列化后，传递给前端的是Content-Type为text/x-component的如下数据结构：

0:["$@1",null]
1:["$","p",null,{"children":["你好，卡颂"]}]

这种数据结构有2个特点：

• 是序列化数据，反序列化后React可以识别
• 每行一条数据，方便流式传输

序列化数据可以显著提高SSR的灵活性。

之所以这么说是因为，之前的SSR只能返回HTML结构，所以SSR主要用于HTML从0到1的首屏渲染。

现在，SSR支持序列化数据。前端框架能够识别SSR的结果，就能操作这个结果进行细粒度的HTML更新。

把这个模型套在数据同步的场景：

• 之前，数据同步的逻辑主要发生在位于前端的React-Query中
• 现在，数据同步的逻辑发生在后端

既然数据同步的逻辑发生在后端，显然就不需要运行在前端的React-Query了。

而且，序列化数据方案还有个好处 —— 凡是能够序列化的模块，都能将逻辑放在后端执行。

虽然React Server Component直译叫服务端组件，看起来最小可序列化的模块应该是组件。

但是，只要遵循规范，其实函数作用域也能作为序列化的模块。

比如，在如下Next.js代码中，AddToCart组件在前端渲染，addItem方法的逻辑是操作数据库的后端逻辑：

import { cookies } from 'next/headers';

export default function AddToCart() {
  async function addItem(data) {
    'use server';
    const cartId = cookies().get('cartId')?.value;
    const id = await saveToDb({ cartId, data });
    return id;
  }

  return (
    <form action={addItem}>
      <button type="submit">加入购物车</button>
    </form>
  );
}

当点击按钮，触发后端执行addItem方法，方法的返回值会以RSC的序列化数据的形式返回给前端。

总结

除了RSC的序列化数据，Qwik是另一款应用序列化数据的SSR框架。

这些框架的理念都是 —— 后端优先。即：业务逻辑如果能放在后端，那就放在后端。

没曾想，随着这些全栈框架的爆发，前端缓存库React-Query成为受伤最重的那个。

这就是所谓的 —— 毁灭你，与你何干。

原文：https://segmentfault.com/a/1190000043831338