Question

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

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

过了一会儿，我发现我可以通过在Html父组件中添加以下内容来实现它：

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

现在页面的工作方式应该如此。但我不认为这是正确的解决方案，因为当我使用＆＃34; -release构建应用程序时，会发出带有哈希标记的main.js（例如main.63635afefa6a.js），并且在部署时不会被发现。

我在这里缺少什么？

Answer 1

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

什么是main.js？

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

但你应该使用--release builds，因为......

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

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

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

Html组件应该在<body>中有一个JSX片段，如：

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

这适用于标准RSK，因为script变量包含main.js文件名（使用--release build时包含哈希）。此变量值来自assets.js，由WebPack构建。然后，通过从server.js注入，它可供Html组件用于上面的片段：

app.get('*', async (req, res, next) => {
  const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };     
  // ...
  const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);

React Starter Kit Main.js未提供给客户

1 个答案: