Soundcloud 上的链接如何变化?

How do links change on Soundcloud?

我注意到他们使用了 href,但页面没有重新加载。如何使用 link 允许您共享一个 link 并让它在不实际重新加载的情况下加载?

我对 window.history、pushState 和 popState 的体验是,如果您尝试在新的 url 上刷新页面,它就会崩溃。这里发生了什么?我的理解是它与状态对象有关,但是如何将页面的整个状态存储在对象中?

Soundcloud 有可能使用了同构的方法。这是 SPA(单页应用程序)和传统服务器端呈现的 MPA(多页应用程序)之间的组合。该页面最初将在服务器端呈现时加载,一旦页面加载并且您单击 link Javascript 将处理导航并阻止默认的 link 导航行为。这里发生的是 XHR 请求被发送到服务器以请求与 link 相关的数据。服务器将有某种特殊的路由来处理通过 XHR 请求请求的 link 和请求的相关数据的快捷方式。该 XHR 请求的响应可能是 HTML 摘录或 JSON 对象,其中包含必要的信息或内容,然后由 Javascript 将其注入到文档中,而无需重新加载页面。 JavaScript 也会将状态推入 URL 以便它反映适当的路由。在这些情况下,路由完全由服务器处理。因此,如果您刷新页面,您将获得与您所看到的相同的内容。

这种方法充分利用了两个领域(SPA 和 MPA)的优点。服务器端在初始页面加载时呈现的内容通常在许多方面更易于访问,并且加载速度比 SPA 快。这种方法还将允许逐步增强和更清晰地分离客户端和服务器端之间的关注点。