前端又出新玩具了，你知道吗？-51CTO.COM

最近，前端圈出现了很多全新的轮子，本文将精选三个热门的新轮子，看看它们各自都有什么特点！

实际上，面对新出现的轮子，我们也不必畏惧。新轮子的出现很大概率是因为现有工具无法满足个性化需求，因此才决定开发新轮子。对于这些新轮子，我们只需保持开放的心态去了解，也借此机会洞察前端技术的发展趋势与方向。

TanStack Start

对于有 React 项目开发经验的同学来说，React Query 或许并不陌生，它隶属于功能强大的 TanStack 工具系列。TanStack 是一个全面的前端工具集合，涵盖了 TanStack Query、TanStack Router、TanStack Table、TanStack Form 及 TanStack Virtual 等多个实用工具。

近期，TanStack 又推出了其最新的力作——TanStack Start，这是一个基于 TanStack Router、Vinxi 和 Vite 的全栈 React 框架。以下是其主要特点：

全栈路由：利用 TanStack Router 提供企业级路由系统，支持全栈类型安全和强大的路由功能。
服务端渲染 (SSR)、流式传输和服务器 RPC：支持全文档服务端渲染、流式传输、服务器函数和远程过程调用 (RPC)，无需在服务器端渲染和客户端交互性之间做出选择。
客户端优先，100% 服务器端能力：在保持前端社区多年来培养的客户端应用体验的同时，提供全功能的服务端能力，不牺牲用户体验。
可部署性：借助 Vinxi 和 Vite，TanStack Start 可以部署在任何可以运行 JavaScript 的地方，无论是传统服务器、无服务器平台还是 CDN，都能轻松构建、打包和部署应用。

虽然目前官网对 TanStack Start 的介绍并不多，但是已经有开源项目的作者认为，这才是 React 的未来，并且已经将其开源项目从 Next.js 迁移到了 TanStack Start。

该项目在 Github 上有 16k Star，链接：https://github.com/learn-anything/learn-anything。

图片

注意：目前 TanStack Start 仍处于 Alpha 测试阶段，不建议在生产环境使用。

TanStack Start 官网：https://tanstack.com/start/latest。

Brisa

Brisa 是一个全栈 Web 框架，它允许开发者混合使用服务器组件（Server Components）+ 服务器操作（Server Actions）与 Web Components + 信号（Signals），全部采用 JSX 编写。

import type { WebContext } from 'brisa';

export default function Counter({ name }: { name: string }, { state }: WebContext) {
  const count = state(0);

  return (
    <p>
      <button onClick={() => count.value++}>+</button>
      <span> {name} {count.value} </span>
      <button onClick={() => count.value--}>-</button>
    </p>
  )
}

Brisa 的特点如下：

服务端渲染（SSR）：页面入口点在服务器上渲染并流式传输到客户端，包括使用声明式 Shadow DOM 进行 Web 组件的服务端渲染。
静态站点生成：可以在构建时生成静态页面，并与动态页面混合。
部分预渲染：可以在构建时预渲染特定页面组件，而页面的其余部分在服务端渲染。
响应性：由于信号（Signals）的存在，Web Components 的属性（props）和状态是完全响应式的。属性在构建时被优化，因此可以像在 React 等框架中一样编写属性，控制它们的默认值、解构等，而不会失去响应性。
功能全面：Brisa 支持 TypeScript、CSS、Tailwind、中间件、API 路由、国际化（路由 + 翻译）、WebSocket、Suspense、服务器动作、测试、Tauri 2.x 等。
统一工具链：除了Brisa外，只需 Bun 来管理所有工具链。Brisa通过添加匹配器丰富了Bun的测试功能，并且无需Webpack、Vite，因为Bun也可以完成这些工作。尽管推荐 Bun 作为运行时，但也可以使用Node.js作为运行时。
HTML 流式传输：Brisa 通过 HTTP 传输 HTML，Web Components响应其属性的变化或新的“动作信号”，服务器动作可以触发 Web 组件的反应，无需服务器重新渲染。
性能优化：Brisa 旨在最小化客户端的 JS 代码，尽可能利用 Web 平台，避免不必要的客户端负载。
国际化：Brisa 提供了与框架完全集成的路由和翻译，使用 ECMAScript Intl 以及一个仅在 Web 组件中使用时才添加到客户端的 800 字节实现。

Github：https://github.com/brisa-build/brisa。

One

One 是一个基于 React 的跨平台开发框架，旨在简化 Web 和原生应用开发，其特点如下：

类型化的文件系统路由：One提供了基于文件系统的路由定义方式，支持嵌套布局和分组，并且完全类型化，增强了开发时的类型安全和自动补全功能，使得路由管理更加直观和高效。
灵活的路由模式：One 支持单页应用（SPA）、服务端渲染（SSR）和静态站点生成（SSG）等多种路由模式，允许全局设置或为每个页面单独设置。
类型化的加载器：One提供了类型化的加载器，简化了数据的引入和从其他框架迁移的过程。
跨平台开发：One支持同时为Web和Native平台开发应用。
完全基于Vite：One完全基于Vite构建，摒弃了Metro，使用一个Vite插件、一个Vite服务器和一个端口来支持三个平台（Web、iOS、Android）的开发。
集成Zero数据解决方案：One与Zero集成，提供了一个默认的、可弹出的数据解决方案，以改善Web开发中的数据管理问题。
简化的代码：One旨在通过简化代码来提高开发效率和应用性能，减少不必要的代码冗余和复杂性，让开发者能够更专注于业务逻辑的实现。
专注于本地开发体验：One强调改善本地开发体验，通过优化开发工具和流程，使得开发过程更加直观、高效和愉悦。

One 由 Tamagui 项目团队开发：

Github：https://github.com/onejs/one。