问题标签 [react-ssr]

我在这里ScrollToTopOnMount实现了一个

效果很好，除非我将它与 SSR 和水合结合使用，否则当水合发生时，我的页面会卡到顶部。

诸如此之类的其他答案给了我希望，可能有某种方法可以区分组件是合法安装还是仅被水合。然而，这似乎不是 react-dom 16.1.1 的情况，服务器和客户端似乎都调用componentWillMount.

有没有办法让生命周期方法确定它是安装在没有 DOM 的地方还是水合现有节点？

假设我有一个如下所示的组件。

我正在使用带有 react-router-config 设置的 react-router v4。我的想法不多了。如何在服务器中获取 userSlugName。

现在如何在服务器中预取这些详细信息以使 SSR 正常工作。

我在为 React 应用程序设置 SSR 时遇到问题。渲染的服务器端代码如下：

路由配置如下：Routes.js

应用程序.js

它抛出以下错误：

当我尝试打印 console.log(React.createElement(Routes)); 时，它显示如下：

我已经使用 babel 从 Routes 文件创建了 CompiledRoutes 文件，并将其导入到 server.js 中，如下所示：

有人可以指导我这里可能是什么问题吗？在此先感谢。

我正在使用 react 16.2.0 并执行 SSR。我的网络应用在补水后闪烁。因此，为了在服务器呈现的 HTML 和客户端呈现的 HTML 中找到错误或不匹配，我在开发模式下运行了代码。现在它显示

我知道这个错误是由于从服务器呈现的 HTML 到客户端呈现的 HTML 中删除了一些 div。

但是现在，我的问题是......如何调试这个？没有对发生它的元素节点的引用。一种解决方案是手动检查整个页面。有没有其他方法..更有效。如何解决此警告？

我正在使用类似于 - https://github.com/ayroblu/ssr-create-react-app-v2的设置以及 sass 预处理。

现在，使用 ignore-styles 包在服务器端忽略了样式 -

但是，在我们使用过类似代码的组件中 -

通过样式变量引用的类名不会在服务器端呈现（因为忽略样式），但在前端可以正常工作。

我们如何确保类名在不破坏服务器端渲染的情况下完美运行？

我正在关注本教程：https ://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/我认为这是“标准”在反应（？）中进行服务器端渲染的方式。

基本上会发生什么是我使用反应路由器（v4）来制作所有即将渲染的组件的树：

等待所有这些承诺解决，然后调用renderToString.

在我的组件中，我有一个名为的静态函数fetchInitialData，如下所示：

所有这一切都很好，除了getUsers在服务器和客户端上都调用。

我当然可以检查是否有任何用户已加载并且没有调用getUsers，componentDidMount但必须有一种更好、更明确的方法来不进行两次异步调用。

我在反应 SSR 中遇到问题。

添加了两个插件，如下

FullCalander 在终端中引发错误，如下所述

我也导入了 jQuery，但不知道为什么会出现上述问题。

当我的 React SSR 应用程序知道需要哪些模块时，它会在运行时加载模块。

Webpack 拆分和捆绑代码。

SSR 应用程序托管在服务器 A 上，并且由于我无法控制的原因，捆绑包必须托管在服务器 B 上。

如何让 Webpack 知道从 B 而不是 A 加载模块？

我几乎完成了使用 SSR (RRv2.3) 和 webpack 1x 电影应用程序代码库更新旧的 React (v15.2x)。我已经将几乎所有内容更新为当前内容（RRv3.2x 除外）。

我收到此错误

它来自这段代码

过去几天我一直在努力消除页面闪烁。我的项目从 create-react-app 开始，然后我使用帮助来设置 SSR 和各种其他选项。当我开始遇到问题时，我剥离了我的代码并弹出。这是我的代码。您可以使用 构建npm run build和启动 SSR npm run serve。访问http://localhost:3000/以查看结果。

我的应用程序中有两条路线：Home和About.

Going to / (Home) 可以按需要工作：react-loadable识别home捆绑包，为其注入<script>标签，然后将页面发送到门外。客户端加载所有捆绑包并在没有闪存的情况下进行反应。

转到 /about 会导致页面闪烁（确保从服务器加载页面以查看此内容）。moment-timezone我在组件中添加了一个 import for about，webpack 巧妙地将它移动到自己的包中，与包分开about。问题是react-loadable它只看到它需要about捆绑包，而不是包含时刻时区的额外捆绑包。因此，在客户端，当 react 接管时，它发现它缺少一个模块，将页面空白，加载包含缺少模块的包，然后重新渲染（至少，我认为它是这样工作的）。

我错过了什么？我正在使用 React-Loadable 自述文件中描述的 babel 和 webpack 插件。看起来 React-Loadable 只够聪明，可以深入一层，看不到导入模块的依赖项是什么，但肯定不是这样，是吗？