0

我正在使用最新的 React Starter Kit (Isomorphic) 构建应用程序，但遇到了问题。大部分应用程序都有静态数据，所以我首先只使用服务器端渲染制作了一些页面。

但是，当我创建一个向按钮添加 onClick 回调的页面时，从未调用过该回调。

过了一会儿，我发现我可以通过将以下内容添加到 Html 父组件来使其工作：

<script async src="/assets/main.js"></script>

现在页面可以正常工作了。但我认为这不是正确的解决方案，因为当我使用“-release”构建应用程序时，会发出带有哈希标签的 main.js（例如 main.63635afefa6a.js），并且在部署时不会找到。

我在这里想念什么？

4

1 回答 1

0

// 这个答案描述了 RSK 目前的工作原理，如果您修改了 RSK 的Html组件或服务器端路由（这也可能破坏了您的应用程序） ，您的问题并不清楚

什么是 main.js？

main.js 是 WebPack 捆绑所有 JavaScript 的地方，这就是为什么强制添加引用它的脚本标签使其适用于非发布版本的原因。

但是您应该使用 --release 构建，因为...

如果您使用 --release 构建应用程序，则会将文件内容的哈希添加到文件名中。这意味着当内容更改时，文件名会更改。

由于旧版本的任何缓存（例如在 ISP 处）都用于具有不同名称的文件，因此可以保证请求具有更新名称的更新文件的客户端不会获得旧版本。

那么如何使用哈希指定正确的 main.js 名称呢？

该Html组件应该有一个<body>类似的 JSX 片段：

    {script && (
      <script
        id="source"
        src={script}
        data-initial-state={JSON.stringify(state)}
      />
    )}

这在标准 RSK 中有效，因为该script变量包含 main.js 文件名（使用 --release 构建时包含哈希）。这个变量值来源于 assets.js，它是由 WebPack 构建的。然后Html通过 server.js 的注入将其提供给组件以在上面的片段中使用：

app.get('*', async (req, res, next) => {
  const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };     
  // ...
  const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
于 2016-08-19T19:44:41.060 回答