问题标签 [server-rendering]

我window在使用的某些模块中有依赖关系，因此我无法在服务器上呈现我的应用程序的一部分。但是，从服务器发送的内容应该与第一次在客户端呈现的内容相同，否则会出现：“React 尝试在容器中使用重用标记，但校验和无效”警告。

似乎我需要做一些解决方法，从服务器渲染内容，然后在安装组件后，仅渲染客户端部分。此处描述的类似问题。

我觉得这是最好的解决方案，但是 AirBnB 的 eslint 会抛出一个错误，即更改状态componentDiMount并不好。

你有更好的想法吗？

I searched a lot and didn't find any implementation to load data async in react server side before render the markup without any flux (redux) implementation. Here's the view (both api and views together):

The router file (router.js):

And this is what I use on server (with react-router)

I know some basic thing that attach api calls to each router url and then resolve the renderToString() after that. But I don't understand how to do that with react-router. I don't want to use any library or flux or redux implementation.

我有一个在 aspnet 核心上运行的 react-redux 应用程序，使用 aspnet 预渲染进行服务器端渲染。

假设我犯了一个编程错误，在子组件中我尝试访问一个未定义的道具，因为一个愚蠢的错字。

如果没有服务器渲染，我会遇到类似于此的错误：无法在 x:yy 行访问未定义的内容但是使用服务器渲染我得到：

处理请求时发生未处理的异常。

异常：调用节点模块失败并出现错误：预渲染在 30000 毫秒后超时，因为“ClientApp/src/boot-server”中的引导函数返回了一个未解析或拒绝的承诺。确保你的引导函数总是解决或拒绝它的承诺。您可以使用“asp-prerender-timeout”标签助手更改超时值。

这使得调试非常困难，当你没有得到任何关于哪里出错的反馈时。如果出现故障，任何人都知道如何设置拒绝？或者甚至可以调试服务器端呈现的代码？

这是我的引导服务器文件，如果您需要更多文件，请告诉我。

我正在研究 create-react-app 和 SSR。

我在这个 repo => https://github.com/sarovin/StarteKit添加了 redux 和 react-router 。

现在我想添加 SSR（服务器端渲染）而不对 create-react-app 进行任何修改。

我有一个 PR 我尝试实现它 => https://github.com/sarovin/StarteKit/pull/1

但我有一些错误，因为该功能onClick()在我的示例中不起作用：

// 应用程序.js

//server.js

有什么建议吗？

我已经在这个问题上花了半天时间，找不到问题所在。我在服务器上使用 react-router。但是对于每条路由，它都会呈现相同的组件（来自根路由的组件）。

这是我的服务器：

这是我的路线：

其他观察：

• 它正确区分不存在的路线，例如。当我在浏览器中输入 /blahblah 我得到 404
• 当我将 AboutHandler 作为根路由的组件时，显示的是正确的
• 我还尝试将“/about”作为路由路径，而不仅仅是“about”
• 这是我在道具中得到的{"routes":[{"path":"/","indexRoute":{},"childRoutes":[{"path":"about"}]},{"path":"about"}],"params":{},"location":{"pathname":"/about","search":"","hash":"","action":"POP","key":"bqces8","query":{}},"components":[null,null],"router":{"location":{"pathname":"/about","search":"","hash":"","action":"POP","key":"bqces8","query":{}},"params":{},"routes":[{"path":"/","indexRoute":{},"childRoutes":[{"path":"about"}]},{"path":"about"}]},"matchContext":{"transitionManager":{},"router":{"location":{"pathname":"/about","search":"","hash":"","action":"POP","key":"bqces8","query":{}},"params":{},"routes":[{"path":"/","indexRoute":{},"childRoutes":[{"path":"about"}]},{"path":"about"}]}}}

更新：

AppHandler 和 AboutHandler 是使用 webpack 构建的。它们的导入方式如下：

以下是这两个文件的相关部分：

应用程序.js：

关于.js：

与客户端渲染相比，我更喜欢对用户交互很少的应用程序使用服务器端渲染。而 webpack 是编译服务器端代码的选择。

有一个场景我想在组件渲染后更新表格的marginTop 。如果是客户端渲染，会列出如下实现

但是，在 ssr 上，组件渲染时永远不会调用 componentDidMount。所以我把这些代码放在componentWillMount中，并更新源代码如下

然后它还有其他问题。

我知道原因，这是因为代码是在节点环境中运行的。没有像浏览器环境那样的文档种类。我能想到的一种方法是将代码放在renderPage 函数中，该函数用于将 React 组件呈现为服务器端Server Rendering上的 html 字符串。但是如果将事件处理程序放在顶级上下文中，它将污染其他呈现的页面。

我还找到了其他解决方案。用于在全局范围内绑定事件的 React 组件。. 我不认为它是最好的解决方案。

所以我想问有没有更好的方法来操作通常放在componentDidMount或componentDidUpdate中的 DOM 节点，如客户端渲染。

我正在使用 react-router 版本 4 并尝试处理服务器上的路由。

所有教程，包括ReactTraining repo 上的官方服务器渲染指南和React Router 教程 - 服务器端渲染都使用 React Router v3。

唯一可用的指南是使用 React Router 版本 4 进行服务器端渲染。

我已遵循相同的步骤，但出现以下错误：

这是我的网络

我的 server.js ：

我正在尝试使用redux-persist. 这是我的代码：

它适用于单一流程。但是，如果我在除主页之外的任何页面上刷新页面，页面上的一切都会受到干扰。我也收到以下警告：

Ps 我正在使用react-redux-universal-hot-example样板

我在弄清楚如何让反应组件具有基于异步获取的数据的初始状态时遇到问题。MyComponent 从 API 获取数据并data通过 Mobx 设置其内部属性action。

客户端，componentDidMount被调用并获取数据，然后设置并正确呈现。

据我所知，在服务器上，componentDidMount是不会调用的。

我的服务器有这样的东西：

我看过很多帖子，其中计算了初始存储并通过Provider组件传递。我的组件已渲染，但它们的状态未初始化。我不想将这些数据保存在商店中，并希望它在本地范围内适用于组件。如何做呢 ？

我在 RR 3 的服务器端渲染方面做了很多工作，所以我想看看它在 v4 的上下文中是如何工作的。我按照网站上的教程进行操作，但是由于现在渲染与路由匹配一起发生，因此无法像以前那样实现预取数据。

这是我过去使用 v3 进行服务器渲染的方式： https ://github.com/alexnm/react-seed/blob/master/server/index.js

基于 match 函数，我会调用所有组件树中的所有 prefetch 函数，然后等待Promise.all它们完成，然后触发renderToString函数并返回 html。

在 RR4 中，我们只有<ServerRouter>组件，所以我提供的当前解决方案是复制渲染代码： https://github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index。 js

我还使用标签render上的功能<Match>来触发预取操作。它很丑陋，并且在我想用预取数据呈现的页面的父组件中引入了各种依赖项。

我在这里想念什么？有没有人为这种情况找到更好的解决方案？我还没有发现任何有用的东西。