时间戳

首页 > 解决方案 > 将现有 React 应用程序的客户端渲染转换为服务器端渲染

javascript - 将现有 React 应用程序的客户端渲染转换为服务器端渲染

问题描述

我的场景是这样的：

  1. 用户将通过另一个应用程序（假设为 application2）单击我的应用程序（假设为 application1）链接。
  2. 然后，applicaion2 将在反向代理转发的请求中发送 HTTP/HTTPS 标头，其中将包含用户角色和更多信息。
  3. 在标题中，我将收到用户角色。
  4. 根据角色，将确定访问类型并将其提供给用户

现在根据我的研究和之前提出的问题，无法获取 http 请求标头。这让我想到了将我的应用程序转换为服务器端渲染的想法，但是当前的代码库非常庞大，以至于它被证明是一项艰巨的任务，我无法找到任何合适的方法来做同样的事情，因为我的应用程序很重基于窗口对象和浏览器路由器以及 ssr 不支持的其他一些东西。 解决这种情况的最佳方法是什么？我现在卡住了，欢迎提出任何建议

标签： javascriptreactjshttpreact-routerhttp-headers

解决方案

不确定服务器端渲染是答案。我以前做过类似的事情，但是两个应用程序只有一个条件相同的域并监听本地存储！在我的情况下，我需要将用户的篮子（这是客户端并存储在本地存储中）传递到同一域中的另一个网站，以分离每个应用程序的范围我在 nginx 中使用 nginx 我编写了两个不同的配置和它们中的每一个都指向不同的应用程序。然后在 nginx 的主配置中，我写了一个条件，如果路径以 /something 开头，则使用 app2 配置，而对于其他路由，则使用 app1 配置。

然后在app1和app2中我写了一个同步函数来监听本地存储和它们的变化

例如，我在本地存储中有一个名为“basket”的密钥，对于 app2，我想使用它

window.addEventListener('storage', handleSyncStorage);

所以这个监听器会监听存储中的变化。如果我想对本地存储中的“篮子”的更改做些什么

handleSyncStorage = e => {
    if(e.key === 'basket') {
       doSomethingToSyncBasket()
    }
}

因此，当篮子的存储发生任何更改时，将调用此函数，但正如我所说，唯一的条件是两个应用程序的域相同

推荐阅读