Hacker News 中文摘要

RSS订阅

现代CSS是时候终结单页应用了 -- It's time for modern CSS to kill the SPA

原文链接 | HN讨论 | 2025-07-26 06:49:23

文章摘要

现代CSS的过渡效果已经消除了客户端路由的主要优势，但人们仍在构建性能不佳的单页应用（SPA），而非高效的网站。SPA的流行源于“让网站像应用一样”的误解，认为无缝导航必须通过构建应用实现。然而，这一假设已过时，现代CSS技术足以提供流畅的用户体验，无需依赖复杂的SPA架构。

文章总结

现代CSS应终结单页应用（SPA）的时代

在2025年7月24日发表的一篇文章中，作者Jono Alderson提出，随着现代CSS技术的发展，单页应用（SPA）的优势已不再明显，甚至成为性能瓶颈。文章指出，SPA最初流行是因为它们能够提供流畅的页面切换体验，避免传统多页应用（MPA）中页面刷新时的白屏和滚动位置错乱问题。然而，大多数SPA并未真正实现其承诺的流畅体验，反而带来了诸多问题，如页面加载延迟、滚动恢复失败、布局错乱等。

SPA的虚假承诺

SPA的流行并非因为它们更好，而是因为在过去，它们是唯一能够提供流畅体验的方式。然而，现实是，大多数SPA通过大量的JavaScript代码来模拟原生导航，导致性能下降。例如，Next.js、Gatsby或Nuxt等框架构建的网站通常需要加载数百KB甚至MB的JavaScript代码，仅仅是为了实现浏览器本身已经具备的功能。

现代浏览器的解决方案

现代浏览器（如Chrome和Edge）已经通过View Transitions API和Speculation Rules等技术解决了这些问题。View Transitions API允许在不使用JavaScript的情况下实现页面之间的平滑过渡，而Speculation Rules则可以根据用户行为预加载或预渲染页面，从而实现即时导航。这些技术使得开发者能够构建丰富、无缝的用户体验，而无需依赖复杂的JavaScript框架。

SPA与MPA的性能对比

文章通过对比Next.js营销网站和现代MPA的性能数据，指出MPA在加载速度、SEO友好性、滚动/焦点/历史行为等方面均优于SPA。现代CSS不仅能够替代SPA的行为，还能在性能上超越它。

回归本质：构建网站而非应用

作者强调，大多数网站并不需要SPA的复杂架构。它们不需要共享状态、客户端路由或每屏的交互组件。相反，网站应该使用HTML、CSS和原生导航，以实现更快、更简单的用户体验。开发者应避免将网站构建得像应用一样，而是应该利用现代浏览器的功能，构建更高效、更易维护的网站。

总结

SPA曾是解决临时限制的聪明方案，但随着现代CSS和浏览器技术的发展，这些限制已不复存在。开发者应利用现代服务器渲染、实际页面、CSS动画和预加载技术，减少JavaScript的使用，构建更快的网站，提升用户体验。

关键词：SPA、MPA、View Transitions API、Speculation Rules、现代CSS、性能优化

评论总结

评论内容主要围绕单页应用（SPA）与传统服务器端渲染（SSR）的优缺点展开，以下是主要观点总结：

支持SPA的观点：

  1. 交互性与用户体验：

    • SPA能够提供类似原生应用的交互体验，尤其适用于需要频繁数据更新的应用（如Gmail、Google Docs）。
    • 引用："A good SPA has a lot of benefits. Because it can be interactive like a native app." (评论1)
    • 引用："If you’ve got a bunch of live data you want to change on interaction an SPA is still hard to beat." (评论4)

  2. 客户端处理与性能：

    • SPA可以将大量用户操作封装在客户端，减少服务器负担，提升用户体验。
    • 引用："SPA is not only about seamless transitions but also being able to encapsulate a lot of user journey on the client side, without the need of bothering server too much." (评论7)
    • 引用："SPAs are better because it offloads as much processing as possible to EDGE cpu’s." (评论30)

  3. 开发效率与组件化：

    • SPA框架提供了组件化和分离关注点的优势，提升了开发效率和代码可维护性。
    • 引用："One of the reasons people like SPA so much is componentization." (评论12)
    • 引用："excellent frameworks for client side logic (interactivity), separation of concerns (presentation logic vs. backend)" (评论17)

反对SPA的观点：

  1. 过度复杂与不必要：

    • 许多网站并不需要SPA的复杂性，尤其是简单的营销页面或静态网站。
    • 引用："SPAs were best for specific use cases but we made them the default for everything." (评论10)
    • 引用："99.9% of the shops using SPAs don’t (and never will) have enough traffic for that tradeoff to make sense." (评论22)

  2. 性能与加载问题：

    • SPA的初始加载时间较长，且在某些情况下可能导致性能问题，尤其是在网络不稳定的情况下。
    • 引用："Lots of websites seemingly operate under the assumption of 'If the client manages to connect to the server once, then surely it can maintain a stable, low-latency connection in perpetuity.'" (评论8)
    • 引用："The devs want (or at least wanted, back in the day) to go work at a company that did, so they wanted to use tools that would make sense if you’re Facebook-sized." (评论22)

  3. 开发难度与维护成本：

    • SPA的开发难度和维护成本较高，尤其是对于小型团队或项目。
    • 引用："Doing MPA is strictly harder than doing SPA, much much harder." (评论13)
    • 引用："The backend code did not decrease in size, whereas the frontend ballooned up to the same size as the backend." (评论22)

中立或平衡观点：

  1. 适用场景决定技术选择：

    • SPA和SSR各有其适用场景，应根据具体需求选择合适的技术。
    • 引用："SPAs make sense when your users have long sessions in your app." (评论9)
    • 引用："Either do a website or an app." (评论20)

  2. 开发者能力与工具选择：

    • 开发者的能力和项目需求是决定技术选择的关键因素，不应盲目追随技术潮流。
    • 引用："Websites and apps that feel like quality are generally made by people who can achieve it." (评论15)
    • 引用："If you are shitty chef, your food is going be shitty." (评论15)

总结：SPA在复杂交互和长会话应用中具有优势，但在简单网站或小型项目中可能带来不必要的复杂性。开发者应根据具体需求选择合适的技术，避免盲目追随技术潮流。