SSR 应用程序中状态管理库的用途是什么？答案

【问题标题】：What is the use of a state management library in a SSR-application?SSR 应用程序中状态管理库的用途是什么？
【发布时间】：2020-05-08 00:20:13
【问题描述】：

我使用 NextJS 作为库来为 SSR 应用程序提供服务。在文档和示例中，我阅读了很多关于为此使用状态管理库的信息。我习惯于在客户端呈现的应用程序上使用状态管理库，但我并没有真正看到 SSR 应用程序中的附加值。在客户端上，我将使用它来存储配置文件、UI 状态以及可能来自 API 调用的一些结果等设置。每当我导航时，这家商店都完好无损。然而，在一个 SSR 应用程序中，当一个导航发生时，一个新的请求进来了，所有的 JavaScript 都被重新加载了，对吧？这意味着我的商店将再次从零开始构建。

【问题讨论】：

在下一个 js 中，只有第一次加载使用 SSR，然后其他页面像常规 SPA 一样加载（除非您在任何页面中使用 getServerProps，但仍然只会在服务器上执行该功能，而该页面将作为 SPA 页面预加载。）
但是对于大多数应用程序，我会放弃使用 redux、mobx，转而使用 context API + hooks，因为 redux 会对应用程序性能和首次加载时间产生负面影响。仅在必要时使用。

标签： reactjs next.js

【解决方案1】：

SSR 中的状态管理主要是预加载客户端水合的状态。

这样做的好处是，例如，如果您想在第一个页面加载时从数据库加载某些内容，那么您可以通过将值呈现到返回给浏览器的视图中来在服务器上执行此操作。因此客户端不必从后端加载异步。

Here is the redux eample

function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          // WARNING: See the following for security issues around embedding JSON in HTML:
          // https://redux.js.org/recipes/server-rendering/#security-considerations
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
            /</g,
            '\\u003c'
          )}
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
    `
}

如果你打算试一试，请小心 JSON.stringify(preloadedState) 这是一个 XSS 漏洞

【讨论】：