Question

我使用NextJS作为库来服务SSR应用程序。在文档和示例中，我阅读了很多有关为此使用状态管理库的信息。我习惯于在客户端呈现的应用程序上使用状态管理库，但是我真的看不到SSR应用程序中的附加值。在客户端上，我将使用它来存储配置文件，UI状态以及API调用的一些结果等设置。每当我浏览时，这家商店都会保持原样。但是，在SSR应用程序中，当发生导航时，会出现一个新请求，所有JavaScript都将再次加载，对吗？这意味着我的商店将再次从零开始构建。

Answer 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漏洞

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

1 个答案: