Javascript 单页web应用程序（SPA）链接/刷新路由设计注意事项和缓存

根据路由考虑，向客户发送SPA代码的推荐做法是什么？当客户直接进入链接（例如

website.com/users/user1

）而不是首先进入根路径时，如何向客户发送SPA代码

一个例子最好地说明了这个问题：

路径

website.com/users/user1

响应一些

application/JSON

，以便SPA可以用信息填充布局

假设您有一个基本的SPA，并且您在

website.com/users/user1

（假设不需要身份验证）上发出请求，而没有首先访问根路径，我们可以将SPA代码（html、css、javascript）发送到客户端，然后他们可以通过web应用程序向不同的路径发出请求。因此，用户访问

websitename.com/users/user1

，服务器不知道客户机是首先需要所有SPA代码还是只需要JSON（可能是缓存了最新版本，或者他们在第一次访问

website.com/

后正在访问

website.com/users/user1

，后者知道向服务器发出特定请求并请求

JSON

）

这通常是如何处理的？标志、日期或其他信息是否随SPA发送到Web服务器，以便服务器知道客户端拥有SPA代码？这可以通过SPA请求路由上的

application/json

内容类型来完成，而不是标准的

GET

请求？或者设置SPA发送的头返回表示它的最新版本（这样我们可以使用缓存，如果它不是最新的，或者还没有SPA，可能会发送一个新版本）

建议SPA如何处理此问题？SPA是否检查URI，并注意它仅从服务器接收SPA代码，而不是从服务器接收实际内容（例如，用户1的信息）。建议我们如何检查？服务器发回SPA代码并设置一个标头，表示SPA需要向

website.com/user/user1

发出另一个请求，以实际检索user1信息的实际

JSON

，而不是SPA代码

---

编辑：我最终遇到了这个问题，答案或多或少解决了我所有的问题：显然，在客户端和服务器端都有很多方法来处理这个问题，我想看看人们处理这个问题的不同方式。（我喜欢上述问题/答案处理问题的方式，可能会使用类似的方案。）

我不知道您的堆栈是什么，也不知道推荐的做法是什么，但我使用webpack来实现这一点。在webpack中，您可以通过定义来实现这一点。这将您的代码拆分为不同的自包含包，因此您可以使用不同的.html文件来生成不同的代码包

根据适当的网页配置调整您的情况：

{
    entry: {
        main: "./index
        user1: "./users/user1",
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

然后，在适当的html中，加载user1.entry.js

我不确定在每个用户都有自己的专用URL的情况下，这有多大的可扩展性（显然，你不能为数百个用户指定一个唯一的入口点），但在这一点上，我不确定你所拥有的技术上是SPA

你也可以考虑使用类似于<代码>路由路由器< /C> >的路由解决方案，它允许你从URL抓取数据。例如，W/A<代码> WebPACK/COM>配置文件，如导航，以示例COM/USERS/USER1:/P>导航。

users.html/users.js:
  loadJSONFromServer({url-user-id})

---

我相信你要问的是，一个用户如何访问一个不是主页的页面（可能通过一个共享的链接），应用程序如何获得它应该显示在该页面上的数据

我通常实现这一点的方法是在lifecycle方法

componentDidMount

中启动一个数据获取，该方法评估已经存在的数据，并填充缺失的部分。您可以通过react router的Oneter挂钩（这是我在SPA中处理用户身份验证的方式）完成类似的事情