Arquitetura
Server Components
Next.js
Performance
Liderança Técnica

服务器优先:减轻浏览器负担的架构决策

将所有内容留在浏览器中既有实际收益,也有实际成本。为那些决定架构以权衡两者的人提供的指南。

多年来,对任何雄心勃勃的 Web 应用程序的标准响应都是相同的:将所有内容发送到浏览器。构建 SPA,让客户端负责渲染、路由和数据,并将服务器用作 API。这种选择变得如此自然,以至于许多人忘记了这是一种选择。

服务器优先运动对这种自动化提出了质疑。论文很简单:我们推送到浏览器的部分工作应该返回到服务器,因为服务器可以更好、更快地完成这项工作,并且对用户来说成本更低。

对于那些决定架构的人来说,这不是采用 React Server 组件或特定框架。这是关于重新考虑应用程序的执行位置,该决定会对性能、成本、安全性和招聘产生影响。值得仔细权衡,因为收益和成本都是真实的。

为什么退出浏览器中的所有内容

SPA 模型诞生于合理的需求:创建丰富且流畅的体验,而无需每次点击都重新加载页面。他处理得很好。问题是当所有类型的应用程序开始使用此模型(包括那些不需要它的应用程序)时会发生什么。

主要成本是重量。在浏览器中执行所有操作的应用程序需要发送一个大的 JavaScript 包,用户在看到有用的内容之前下载、处理和执行该 JavaScript 包。这个包随着产品的增长而增长,在某些时候它会成为任何特定优化都无法真正解决的瓶颈。

第二个成本是数据距离。当在浏览器中进行渲染时,获取数据意味着用户设备和服务器之间的往返,这会增加用户网络的延迟。在服务器上,相同的数据与源的距离只有几毫秒。

将所有内容留在浏览器中并不意味着放弃 SPA 的优点。它认识到并非每个应用程序都需要付出代价,并且在旧的静态网站和繁重的 SPA 之间存在更健康的中间地带。

你得到什么

第一个收获是感知绩效。在服务器上渲染时,用户从一开始就接收可见内容,而不是等待 JavaScript 唤醒。页面看起来已经准备好了,而对速度的感知决定了人们是留下还是放弃。对于依赖于转化的产品,这将成为月底的数字。

第二个收获是 JavaScript 的大小。当大部分逻辑在服务器上运行时,其代码不会发送到浏览器。捆绑包缩小了,设备处理的数据减少了,应用程序的响应也更好了,尤其是在普通手机上,而手机才是真正大众的大多数。这是连接服务器优先与 [React Server Components0 的点。

第三个收获是SEO。服务器上呈现的内容已准备好可供搜索引擎使用,而无需依赖执行 JavaScript 的机器人来查看页面。对于任何依靠有机流量生存的产品,向服务器提供完整的 HTML 可以消除索引方面的整个不确定性。

第四个收益常常被低估,那就是安全性。您不希望公开的敏感业务逻辑、访问密钥和规则保留在服务器上,因为它们永远不会发送到浏览器。在 SPA 中,可以检查发送给客户的所有内容。在服务器优先中,您可以选择哪些内容被删除以及哪些内容受到保护。

任何人都不应忽视的权衡

这些都不是免费的,假装否则会导致错误的决定。第一个权衡是概念的复杂性。考虑一个部分在服务器上运行、部分在客户端上运行的应用程序比考虑完全在浏览器中运行的应用程序更困难。两侧之间的边界需要仔细绘制,如果画错了就会产生微妙的错误。

第二个权衡是基础设施。 SPA 可以作为静态文件,托管成本低廉且简单。服务器优先的应用程序需要服务器运行、处理请求、维护连接。这改变了部署拓扑,需要不同类型的监控,并增加了以前不存在的故障点。

第三个权衡是服务器成本。服务器上的呈现会消耗每个请求的处理。用户越多,负载就越大,这会出现在云账单中。缓存策略可以提供很多缓解,但您需要为其做好计划,而做得不好的缓存也会带来自己的问题。在假设成本会很低之前,有必要充分了解[缓存和流式传输1]。

第四个权衡是团队的学习曲线。习惯了浏览器模型的开发人员需要重新学习代码的运行位置,并停止出于习惯将所有内容标记为客户端。这种转变需要时间,一路上会产生错误,并且需要技术领导层愿意审查和纠正旧的反应。

服务器优先何时有意义(以及何时不有意义)

这个决定并不具有普遍性,将其视为教条与忽视它一样糟糕。当负载性能对业务很重要时、当 SEO 相关时、当公众使用普通设备或不稳定的网络时,以及当您处理希望在服务器上受到保护的逻辑时,服务器优先显然会带来回报。

另一方面,在某些情况下,传统 SPA 仍然是正确的选择。内部面板,在登录之后,由少数人在功能强大的机器上访问,具有非常高的交互性,并且不关心 SEO,从服务器优先中获得的收益很少,并且仍然支付基础设施成本。强制执行标准会带来复杂性且没有回报。

常见的错误是根据时尚而不是根据背景来决定。采用服务器优先,因为它正在兴起,而不评估产品和公众的形象,会导致更昂贵、更复杂的系统,而不会带来证明其合理性的收益。问题不在于技术好不好,而在于它能否解决你实际遇到的问题。

诚实的决定方法是查看您的真实用户和当前的瓶颈。如果初始负载是一个计量问题,如果捆绑失控,如果 SEO 停滞增长,服务器优先就可以解决这些问题。如果这些都没有什么坏处,那么紧迫性就会降低,并且值得将其视为渐进的演变。

技术领导力应该如何领导

采用服务器优先是一个架构项目,而不是库切换,并且应该像任何重大决策一样严格。第一步是调整原因。如果团队不理解它正在解决的问题,它就会机械地应用该模式,并收获两全其美的结果:新的复杂性却没有真正的收获。

第二步是将学习曲线视为日程安排的一部分,而不是细节。为团队保留犯错的空间,回顾和调整他们对什么在哪里运行的直觉。跳过这个阶段只会将成本推高,伪装成生产中的错误。

第三步是测量。初始负载、包大小、页面可用的时间、服务器成本:设置前后数字。服务器优先是由结果来证明的,而结果是用数据来证明的,而不是用感觉来证明。如果没有测量,您将不知道额外的复杂性是否值得。

为了将这一决定置于团队当今面临的技术选择的大局中,值得阅读[2026 年的网络开发2。如果您正在评估此迁移,请从小处开始:选择产品中收益明显的部分,对其进行测量、学习,然后才决定扩展。

另请阅读

  • [Next.js 中的缓存和流式传输:性能成为架构决策3
  • [什么是 React 服务器组件以及为什么逻辑要回归到服务器4
  • [Next.js App Router:默认思考服务器指南5
  • [可扩展的软件架构:如何构建可增长的系统6
  • [Next.js 中的服务器操作:无需为此维护 API 的突变7
  • [应用程序可扩展性:完整的技术指南8