如果你正在做一个涉及 web app 的十亿美元公司，这里是我关于前端架构的笔记。 不做这些大概率也没事，但迟早会雇人来修——而那个人本可以做更有价值的事，如果你在第 1 天就做对几个关键决策的话。 而且你甚至不用自己学，直接让 agent 来做就行！ 好，开始： - **让 server 代码生成 OpenAPI spec，再从 spec 生成所有客户端代码。永远不要手动写。**手敲 backend 类型而不是生成，应该被禁止。 - 你需要决定客户端如何与 backend 通信。REST/GraphQL 都行，这种情况下请用 TanStack Query。其他库看起来类似，但 TanStack Query 真的是神。 - 如果想要 Linear 那种实时同步或离线模式，**从第 1 天就认真想清楚并把架构定好**。事后加上去极其痛苦。 - 很多人喜欢用纯 React Router，但现在已经进化很多了。试试它的 framework 模式，或者直接用 TanStack Router。用 route data loaders。 - 如果大量状态存在 query params 里，把它做成一等公民并确保类型安全。用 nuqs 或 TanStack Query。 - 大多数 app 只需要一套管理 server state 的状态管理方案就够了。如果有其他特殊需求，我比较喜欢 zustand 和 xstate/store。 - 如果你的 app 高度交互、内容频繁进出视图、还在放音乐之类的，**认真学 xstate**。如果想保住理智，你需要把前端建模成状态机，否则你会深陷 useEffect 地狱。 - React compiler 来了，useMemo 和 useCallback 的时代结束了。更新你的认知。 - Tailwind 简单好玩，但在大型 app 里很难维持一致的样式。你需要一个「agent-first 设计系统/组件库」，但这是另一个话题了。 - 不要怕魔改你的路由库来更贴合你的需求。很多 app 有 drawer 来展示额外信息。你应该能说「这是一个 route，把它做成 drawer」，剩下的全自动处理。 - 用 isPending 和 isError 管理 loading 和 error 状态是一种折磨。多用 Suspense 和 ErrorBoundary。 - 如果你在做 AI 相关的东西，第 1 天就定好 WebSocket 和 SSE 的标准方案，长期来看绝对值得。 - **如果你在做 SPA，别用 Next.js**，真的毫无意义。 - 部署在 Cloudflare 或 Vercel。其他服务总有奇怪的功能缺失。 - 假设你做出了人们想要的东西，下一个任务是**把工厂建好，让它能高效地持续生产**。按这个逻辑行动。
760 tweets · 188 sources