问题标签 [react-universal]

我目前正在阅读一本关于 React 和 Universal 应用程序的书，其中作者声称以下是将初始状态从服务器传递到客户端的最佳实践：

服务器.js

然后，在客户端中，您将读取如下数据：

捆绑.js

据我了解，初始状态首先转换为字符串，然后作为全局对象文字附加到窗口对象。

这个解决方案对我来说看起来很粗糙。这本书于 2016 年年中发布。使用方法window.__INITIAL_STATE__仍然是如何做到这一点还是有更好的解决方案？

例如，我可以想象可以在单独的微服务调用中提供初始状态，然后也可以比将数据直接嵌入到文档中更好地缓存，因为这样初始状态数据必须在每个页面刷新的时间，即使数据没有改变。

我想通过我的 React Universal（带有 Next.js）应用程序中的 REST 服务调用接收数据fetch()，然后将结果呈现到 JSX 中，如下所示：

不幸的是，输出是这样的：

这确实有意义，因为对 fetch 的调用是异步的，并且render()在对 REST 服务的调用完成之前完成。

在客户端应用程序中这不会有问题，因为会调用状态更改render()然后更新视图，但在通用应用程序中，尤其是在客户端上关闭 JavaScript 时，这是不可能的。

我该如何解决这个问题？

有没有办法同步或延迟调用服务器render()？

在服务器上，出于 SEO 的原因，我们总是希望显示详细的 H1。然而，在移动客户端上，由于屏幕空间有限，我们希望显示较短的 H1。

这导致：Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

例如，想象一个关于第二次世界大战的页面，它是关于希特勒的。想要的结果是：

客户：<h1> History </h1>....（在手机等小型设备上）

服务器：<h1> History, World War 2, Hitler </h1>..（和桌面设备）

有人对如何解决这个问题有任何想法吗？是否应该忽略此警告？还是有更好的方法来实现这一目标？

我有一个Redux saga 样板的分支，我尝试通过操作更新服务器端的存储。一切顺利，但是更新商店时组件没有更新（不要调用 mapStateToProps）。怎么了？请帮忙。

服务器日志

组件来源：

server.js 来源：

在我的 reactjs-universal 组件中，我写了这个：

在同一个组件中，我想分派一个动作，例如：

当它运行时，我得到：

是否可以在我的组件中以某种方式获取对商店的引用，以便我可以调度操作？

我在我的通用反应应用程序中使用 react-router 2.0。通过 Link 组件导航可以工作，但是当我手动粘贴 url 时没有任何反应（浏览器挂起）。我该如何解决这个问题？这是路由器代码：

我在我的 react/redux 应用程序中使用 react-cookie v2。要设置 cookie，您需要将组件包装在 HOCwithCookies(component)中，然后您可以使用它this.props.cookies.set('first_cookie', someCookie);来设置 cookie。

但是，我想在我的所有组件都可以用来设置 cookie 的 util 文件中设置我的 cookie。例如。

这个 util 文件不能被包装，withCookies因此没有直接的 cookie。我可以从使用组件 ( setToCookies(cookiesInstance, key, value, options)) 中传入 cookie 实例，但如果可能的话，我宁愿在 util 文件中导入一个 cookie 实例。

这必须是一个非常常见的用例（用于处理 util 文件中的 cookie），我只是想不出这样做的最佳方法。

我正在尝试将我的 ReactJS 应用程序转换为具有服务器端渲染的通用应用程序，但有些东西我不明白。在我的组件中使用和导入样式的最佳方式是什么？我可以只在 HTML 中导入外部样式表并在我的所有组件中使用它吗？或将特定样式表导入每个组件并将其用作单独的变量，如下所示：

使用第二种方法时，我注意到每次刷新页面时，样式加载速度都太慢了，有一秒钟我看到我的页面没有任何 CSS，然后我看到我的整个页面都有 CSS。如果没有外部和全局样式表，有什么方法可以绕过它？例如，Airbnb 就是这样做的。也许通过某种方式等到所有样式都加载完毕？

此外，在我将应用程序移至服务器端渲染后，我收到一些奇怪的警告，如下所示：

嘿，我想在同一行设置两个 textInputs，在 android 模拟器中命名为 Expiration date 和 CVV。

这里包括两个 textInputs 的 CSS \

请让我知道如何在同一行设置它..提前谢谢

我在渲染服务器端时遇到了麻烦。我总是得到^

ReferenceError：文档未定义

var root = document.getElementById('root');

我知道该节点不理解浏览器文档对象发生了什么。但我似乎无法修复它。我在 webpack 或服务器或 app.js 中做错了什么。

这是我的代码

服务器.js

webpack.config.node.js

最后是我的 app.js