大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.React 服务器组件

React 服务器组件 (React Server Components) 方面取得了长足进步，该规范的第一个实现在 Next.js 13 中被引入，该规范于 2022 年 10 月 25 日在 Next.js Conf 上宣布。此版本标志着 App Router（app/ 目录）的开始，其完全采用了 RSC。

尽管 Next.js 13 (2022) 和 14 (2023) 一直是推动 RSC 的主要引擎（并且由于大胆引入该技术而收到很多负面反馈），但 Next.js 15 (2024) 为大众带来了更稳定的 RSC 。

2025 年很可能将是 React Server Components 成为 React 生态标准原语的一年，因为 React Router（ 以前的 Remix）和 TanStack Start 也有望在其即将发布的版本中采用 RSC。

import db from "./database";
async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <Author id={note.authorId} />
      <p>{note}</p>
    </div>
  );
}
async function Author({id}) {
  // NOTE: loads *after* Note,
  // but is fast if data is co-located.
  const author = await db.authors.get(id);
  return <span>By: {author.name}</span>;
}

React 服务器组件 (RSC) 通过仅在服务器上执行一次，并将渲染的标记（而非 JavaScript）发送到客户端。其减少了客户端 JavaScript 包的大小，同时允许直接访问数据库、API 和后端逻辑，且无需将其暴露给浏览器。

RSC 可以与客户端组件一起工作，让开发者通过将繁重的逻辑保留在服务器上来优化性能，同时在需要时仍能实现交互。

2.React 服务器函数

React 服务器操作 (React Server Actions，RSA) 是作为 React 服务器组件的演进而引入的，其允许组件调用服务器函数来简化变更（例如：表单提交、数据库更新），为开发者提供类似于远程过程调用 (RPC) 的体验，而无需手动定义 API 路由。

"use server";
export async function updateName(name) {
  if (!name) {
    return {error: "Name is required"};
  }
  await db.users.updateName(name);
}

"use client";
import {updateName} from "./actions";
function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const submitAction = async () => {
    startTransition(async () => {
      const {error} = await updateName(name);
      if (error) {
        setError(error);
      } else {
        setName("");
      }
    });
  };
  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending} />
      {error && <span>Failed: {error}</span>}
    </form>
  );
}

然而，虽然 RSC 改善了数据获取的开发者体验 (DX)，RSA 简化了变异（数据变更），但在客户端组件中获取数据依然棘手。例如，在 Next.js 中，开发者必须自定义 API 路由来获取客户端组件的数据，从而与 RSC 和 RSA 改进的 DX 不一致。

一个临时的解决方法是使用 React Server Actions 在客户端组件中获取数据，尽管这种方法有一些缺点。

可喜的是， 2024 年 9 月 React 团队官宣支持 React Server Functions (RSF) 作为在服务器组件和客户端组件中获取和变异数据的总称，而 RSA 只是用于变异数据的 RSF 的子集。

服务器函数（RSF） 允许客户端组件调用在服务器上执行的异步函数。

当使用 “use server” 指令定义服务器函数时，框架将自动创建对服务器函数的引用，并将该引用传递给客户端组件。当在客户端调用该函数时，React 将向服务器发送请求以执行该函数并返回结果。

服务器函数 可以在服务器组件中创建并作为 props 传递给客户端组件，也可以在客户端组件中导入和使用。

// 服务器组件
import Button from "./Button";
function EmptyNote() {
  async function createNoteAction() {
    // 服务器组件使用 "use server" 指令声明服务器函数
    "use server";
    await db.notes.create();
  }
  return <Button onClick={createNoteAction} />;
}

值得注意的是，目前还没有一个 React 框架实现 React Server Functions（尚未进入测试阶段），但可以预期其很可能在 Next.js、TanStack Start 和 React Router 的未来版本中引入。

3.React Forms 的优化

React 19 于 2024 年底发布，为 React 生态带来了许多改进。虽然 React Server Components 和 React Server Functions 是该版本的核心，但 React Forms 也值得关注。

React Forms 最大的变化是 <form> 元素上的 action 属性，其允许开发者指定在提交表单时应调用的服务器 Action。

import {updateCart} from "./lib.js";
function AddToCart({productId}) {
  async function addToCart(formData) {
    "use server";
    const productId = formData.get("productId");
    await updateCart(productId);
  }
  return (
    <form action={addToCart}>
      // form 支持 action 属性
      <input type="hidden" name="productId" value={productId} />
      <button type="submit">Add to Cart</button>
    </form>
  );
}

React 19 还引入了新的 Hooks，例如： useFormStatus、useOptimistic 和 useActionState 等，主要专注于管理表单及其客户端交互。

import {useFormStatus} from "react-dom";
import {submitForm} from "./actions.js";

function Submit() {
  const {pending} = useFormStatus();
  // 要在提交表单时显示 pending 状态
  // 开发者可以调用 <form> 中渲染的组件中的 useFormStatus Hook 并读取 pending
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );

function Form({action}) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}
export default function App() {
  return <Form action={submitForm} />;
}

有了这些新功能，React 中的表单处理变得更加强大和灵活。

4.React 框架的全新发展

虽然 Next.js 目前是最流行的 React 框架，但其他框架很可能会在 2025 年获得新的关注，例如：TanStack Start 和 React Router。

React Router v7 是 Remix 继 v2 之后的下一个主要版本，如果已启用所有 Remix v2 未来标志，则从 Remix v2 升级到 React Router v7 则主要只涉及更新依赖项。

虽然 TanStack Start 在很大程度上构建在 TanStack Router 之上，属于新产品，但 React Router 是一个成熟的库，在 Remix 沉寂了一段时间后正在演变成一个成熟的前端框架。

import {type RouteConfig} from "@react-router/dev/routes";
import {remixRoutesOptionAdapter} from "@react-router/remix-routes-option-adapter";

export default remixRoutesOptionAdapter((defineRoutes) => {
  return defineRoutes((route) => {
    route("/", "home/route.tsx", { index: true});
    route("about", "about/route.tsx");
    route("","concerts/layout.tsx", () => {
      route("trending", "concerts/trending.tsx");
      route(":city", "concerts/city.tsx");
    });
  });
}) satisfies RouteConfig;

这两个框架在 React Server Component 和 Server Function 支持方面仍处于早期，但有可能成为 React 生态的主要参与者，并提供 Next.js 的替代方案。

5. 全栈 React

服务器驱动的 React 功能，例如： React Server Components 和 React Server Functions 的兴起为使用 React 的全栈 Web 应用铺平了道路，而且趋势非常突出。

但在 RSC 和 RSF 中访问数据库只是一个开始，全栈 Web 应用需要完整的后端基础设施，包括：身份验证、授权、消息队列、电子邮件服务 等等。

然而，虽然后端服务对于全栈应用至关重要，但客户端与服务器之间的通信仍至关重要，即使像 React Server Functions 这样的远程过程调用。因此，2025 年很可能看到更简化的验证和 HTTP 状态代码处理的用户体验。

6. React 与 Shadcn UI

近年来，Shadcn UI 已成为 React 项目的标配，就像 Tailwind CSS 一样。其 通过预设但支持组件自定义 的方式，在便利性和灵活性之间取得了平衡，使其成为不受传统库限制的开发者的首选。

import {Terminal} from "lucide-react";
import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";

export function AlertDemo() {
  return (
    <Alert>
      <Terminal className="h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  );
}

该趋势标准化了现代 React 样式，但随着大部分项目的趋同，下一个大型 UI 库很可能呼之欲出。

6. React 和 AI 的融合

AI 和 React 的交集主要包括两个方面：

• React 代码被广泛用于训练 AI 模型。因此，像 v0 这样的 AI 工具正在生成 React 代码，且可以非常容易地将其集成到项目中。
• 随着 React 通过 RSC 和 RSA 演变为全栈框架，其正在成为构建 AI 驱动应用的理想选择。 Vercel 的 AI SDK 和 LangChain 等库进一步增强了 React 开发复杂 AI 解决方案的能力。

import {generateText} from "ai";
import {openai} from "@ai-sdk/openai";
const {text} = await generateText({
  model: openai("o3-mini"),
  prompt: "What is love?",
});

7.React 的工具链 Biome

设置 ESLint 和 Prettier 让很多开发者如芒刺背，尤其是在协同场景，但其又是 Web 开发者必不可少的工具。Biome（前身为 Rome）旨在通过快速、一体化的工具链解决方案简化这一过程。

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {"ignoreUnknown": false, "ignore": [] },
  "formatter": {"enabled": true, "indentStyle": "tab"},
  "organizeImports": {"enabled": true},
  "linter": {
    "enabled": true,
    "rules": {"recommended": true}
  },
  "javascript": {"formatter": { "quoteStyle": "double"} }
}

另一个有前途的替代方案是 oxc。

Biome 因在 Rust 中创建性能更高的格式化程序而获得了 Prettier 的 20,000 美元赏金，但是开发者是否会广泛采用还有待观察。

各种论坛（例如： Next.js）都在讨论如何减少对 ESLint 的严格依赖并允许使用其他 linter，而 Biome 就是热门候选。

8. React 编译器

很多 React 开发者都对 useCallback、useMemo 和 memo 等方法爱又恨。虽然 React 需要明确的性能优化，但其他框架却选择默默在背后完成一切。

import reactCompiler from "eslint-plugin-react-compiler";

export default [
  {
    plugins: {
      "react-compiler": reactCompiler,
    },
    rules: {
      "react-compiler/react-compiler": "error",
    },
  },
];

React 团队开发了一个 React Compiler，以自动化 React 应用程序中的所有缓存。该编译器旨在消除 手动缓存函数（useCallback）、值（useMemo）和组件（memo） 的需要。React 将自动处理这些优化，减少每次渲染时重新计算的需要。

截至今天，开发者可以试用测试版的 React Compiler。

参考资料

声明：文章主体框架参考 Robin Wieruch 编写的文章《React Trends in 2025》，但是加了部分自己的理解。

https://react.dev/reference/rsc/server-components

https://www.robinwieruch.de/react-trends/

https://react.dev/reference/rsc/server-functions

https://www.robinwieruch.de/next-server-actions-fetch-data/

https://react.dev/reference/react-dom/components/form

https://www.robinwieruch.de/react-tech-stack/

https://react.dev/learn/react-compiler

https://www.tristatetechnology.com/blog/future-of-reactjs-trends-innovations