在单页应用程序中处理页面刷新的最佳方法是什么?

What is the best approach to deal with page refresh in a Single Page Application?

我曾经使用 Java/Spring 构建网站,将有一个控制器来捕获特定 URL(例如 mydomain.com/xyz)的请求,以便用户可以点击浏览器中的刷新按钮,页面仍在显示。但是对于单页应用程序,因为所有页面都是一次加载的,当用户点击其中一个页面上的刷新按钮时会发生什么?浏览器会尝试向后端发送请求,但后端对具体情况一无所知URL,处理这种情况的最佳方法是什么?

在最简单的情况下,您将 Web 服务器配置为在任何 URL.

交付 Web 应用程序的 HTML

例如:

http://example.com/
http://example.com/foo
http://example.com/foo/some/deeply/nested?link=true

是否所有 return 都相同 HTML,加载相同的 javascript 启动您的应用程序。

然后您的单页应用会使用路由,它会查看当前 url 并据此决定要显示的组件。

React Router 是一个流行的选择。您设置了一系列由组件呈现的路径,例如:

<Route path="/books/:id" component={BookPage} />
<Route path="/users" component={UsersPage} />
<Route path="/safety" component={SafetyPage} />

当您的应用程序启动时,/books/123 在 URL 中,然后呈现 BookPage


要更进一步,您可以让服务器预呈现您的组件并按照您的前端应用程序呈现它的方式提供您的页面。你仍然有上面的路由,但现在应用程序“补充”HTML 作为你的 UI 的基础。这有助于缩短加载时间,因为您的应用程序的整个代码不需要加载即可查看内容,并且允许搜索引擎为您的内容编制索引(因为它们不执行 javascript)。

这有点复杂,但如果您好奇,Next.JS 是一个流行的选择。