我正在使用最新的React Starter Kit(Isomorphic)构建应用程序,我遇到了问题。大部分应用都有静态数据,所以我首先只使用服务器端渲染制作了一些页面。
但是,当我创建一个向按钮添加onClick回调的页面时,从未调用回调。
过了一会儿,我发现我可以通过在Html父组件中添加以下内容来实现它:
<script async src="/assets/main.js"></script>
现在页面的工作方式应该如此。但我不认为这是正确的解决方案,因为当我使用&#34; -release构建应用程序时,会发出带有哈希标记的main.js(例如main.63635afefa6a.js),并且在部署时不会被发现。
我在这里缺少什么?
答案 0 :(得分:0)
//这个答案描述了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} />);