在 Web 开发中，Single-page Application（SPA）已经成为了一种流行的开发模式。SPAs 使用 AJAX 和 JavaScript 动态地更新网页内容，从而使用户可以快速地浏览网页。但是，当用户想通过浏览器的刷新按钮或者直接在地址栏输入 URL 来访问一个 SPA 应用的特定页面时，会遇到下面的问题：浏览器会向服务器发送请求，但服务器并不知道该如何响应该请求。这时候，我们需要使用一些技巧来解决这个问题。
前端路由
一种常见的解决方案是使用前端路由。在前端路由中，所有的 URL 都由前端框架或库来处理，而不是由服务器来处理。这意味着服务器只会响应 SPA 的基本页面，而其他的 URL 都会转到单一的页面上。当浏览器首次访问应用时，前端框架或库会读取 URL，然后加载相应的组件。之后，如果用户使用前端路由点击了页面上的链接，前端框架或库会更新 URL，并根据新的 URL 加载相应的组件。这种方式下，浏览器刷新时只会检查当前 URL 是否被服务器响应，如果不在服务器的路由表中，浏览器会继续访问同一个 URL。
一个常见的前端路由库是 React Router，它提供了一些基础组件，例如 <Route> 和 <Link>，用于管理路由和链接。
下面是一个简单的 React Router 应用的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- -------- ----------
----- ----- - -- -- --------- ----------
----- --- - -- -- -
--------
-----
----
--------- -----------------------
--------- -----------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
--
------ ------- ----服务端渲染
另一个解决方案是使用服务端渲染（Server-side rendering， SSR）。服务端渲染的主要目的是为了提高应用的渲染速度，而不是解决刷新问题。但是，在使用 SSR 时，浏览器刷新时，服务端会响应浏览器的请求，并返回正确的 HTML、CSS 和 JavaScript 等内容，在搜索引擎爬取的时候也会更友好。
使用 SSR 的时候，首先要保证应用使用的是服务端渲染框架，例如 Next.js。然后，在渲染页面时，服务端会读取 URL 中的参数，然后生成相应的 HTML 页面，并返回给浏览器，从而解决刷新问题。虽然服务端渲染需要更多的处理工作，但是它可以提高渲染速度并有助于优化 SEO。
下面是一个 Next.js 应用的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ------------
----- ---- - -- -- -------- ----------
----- ----- - -- -- --------- ----------
----- --- - -- -- -
-----
----
--------- --------------------------------
--------- --------------------------------------
-----
--- --
- -- ---- --- ----- -- -
- -- -- --- ------- --- -- -- -
- -- ----- ------- ------- -- -
-------- --
------
--
------ ------- ----结论
在本文中，我们介绍了两种解决 SPA 应用无法刷新问题的方法：前端路由和服务端渲染。在选择适合自己应用的解决方案时，应该根据具体的应用场景来选取。如果需要提高渲染速度和 SEO 的友好度，可以使用服务端渲染；而如果需要简化应用的结构和提高开发效率等，可以使用前端路由。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee5cec6fbf960197217837