问题标签 [react-dom-server]

为了改进 TTFB（到第一个字节的时间），“PageSpeed Insights”建议使用ReactDOMServer.renderToNodeStream()，但我不知道如何实现它。我阅读了rendertonodestream文章，但我不知道如何使用它。另外，我阅读了dev.to 文章，但在我的 next.js 应用程序中，没有 webpack.config.js 文件。如果我不能renderToNodeStream与 Next.js 一起使用 react，如何覆盖renderToNodeStreamNext.js 中的效果？

我renderToNodeStream在 SSR 反应应用程序中使用。

在浏览器中，我[Object]出现在屏幕上一瞬间 - 这是从哪里来的以及如何阻止它出现？

我试图通过屈服于允许其他服务器请求查看的事件循环来使 React 成为更好的公民，renderToString例如renderToStaticMarkup

我期待这个：

但我实际上得到了这个：

我想知道它是否与.on('data'); 我知道它不能管理背压，但我一直认为它是异步的？

注意：我没有将响应传递给客户端，因为我需要等待渲染完成才能确定状态代码；我只是想用来renderToNodeStream改进 node.js 中的协作多任务处理）

Github 上的最小可重现示例

我正在尝试将一些图像注入从 Markdown 创建的页面中。我正在尝试使用 ReactDomServer.renderToString()

img 显示为黑框，如果我右键单击图像，我可以在新选项卡中打开它，该选项卡会显示应有的图像。

我有一个使用React但服务器渲染的项目。当客户端通过在搜索字段中写入 URL 来请求网站的初始页面时，server.js用于renderToString()将反应字符串化（添加了一些初始数据）并将其与和App.js一起发送给客户端。从此时开始，客户端将在不再需要初始数据的情况下浏览应用程序。每当他们导航到不同的组件时，都会从同一个组件中请求相应的数据。bundle.jscssReactcomponentDidMount()server.js

问题是我无法区分GET来自 a 的请求componentDidMount()和来自在搜索栏中键入 URL 的用户的请求。这对于了解何时发送带有初始数据的新标记以及何时仅发送响应对象至关重要。

现在，我正在使用一种非常粗略的方法querystring在GET请求中附加 acomponentDidMount()来确定它需要非初始数据/该请求不是进入网站时的初始请求。这种方法非常混乱，例如，在刷新时，非初始查询停留在 url 中，但自从刷新后，它会抛出所有缓存的 react 应用程序，然后它会接收裸露在浏览器。

有没有更好的方法来做到这一点？也许在 fetch get 请求中有一个附加信息，显示了GET请求的生成位置（无论是来自单击的链接还是键入的 URL）？

我想使用 BrowserRouter 来创建多页反应应用程序，我可以在其中访问具有不同路由器名称的不同模块。我可以分别使用 http://localhost:3000/home 和 http://localhost:3000/about 在 Home 和 About 模块之间切换。

我创建这个基于路由器的应用程序的主要目的是将构建文件部署到我们需要访问项目的服务器中。

将文件部署到我的上下文文件夹之一（myapp）后，我可以使用 http://localhost:8080/myapp/index.html 访问我的项目。

问题是如何在我可以使用 http://localhost:3000/home 的模块之间切换。如何从部署中访问 Home 和 About 模块。（Tomcat）。请帮助我。

应用程序.js：

我在使用“react-dom/server”中的renderToString在SSR 渲染某些 URL 时遇到了一些错误

我收到以下错误：

我发现，在react-dom-server.node.development.js → createWorkInProgressHook()

我得到下面的对象，其中memoizedState不是一个数组。

在useMemo() var prevDeps = prevState[1];中使用时 将返回 undefined 并因此导致areHookInputsEqual() 出现问题

我不确定可能出了什么问题，所以没有代码可以分享。

我正在使用react-rails / webpacker开发一个应用程序，带有一个 rails 服务器和 React 前端。除此之外，我们还使用styled-components并覆盖了app/javascript/packs/server_rendering.js文件中现有的ReactRailsUJS.serverRender方法来解释样式化组件，如下所示（参见https://github.com /reactjs/react-rails/issues/864#issue-291728172了解更多信息）：

这一切都很好，因为作为 ReactRailsUJS.serverRender 函数的第一个参数传递的renderFunction参数是react -dom/server 的 renderToString 方法。但是，我们想更新应用程序以使用renderToNodeStream方法来渲染我们的反应组件，这就是让我参与这个讨论的原因。

我想知道是否有人对这些库如何在更核心的级别上工作有更深入的了解，以帮助我弄清楚在给定我们的应用程序设置的情况下我们如何能够使用 renderToNodeStream。

任何建议/方向表示赞赏，如有必要，我可以提供更多信息。感谢您的考虑和帮助！

我有两页几乎相同的页面，但一个有一些额外的元素要显示，另一个没有。没有什么比一些私人用户数据或身份验证更有趣了：页面是纯静态的。

所以我想要的是在同一个 url 下显示这两个页面之一，这取决于存储在用户设备上的参数（很可能是 cookie）。

我只看到三个解决方案，每个都有自己的问题：

1. 坚持使用静态方法，只需将其设为两个不同的页面，具有两个不同的 urls。我不喜欢这种方法，因为这些页面具有相同的目的，并且我不希望用户共享同一页面的两个不同链接。

2. 停止将其视为静态，并getServerSideProps根据 cookie 使用和渲染不同的组件。当然我也不喜欢这种方法：页面不再是静态的，即它失去了它的简单性，getServerSideProps 禁用了静态优化，因此请求处理得更慢。

3. 坚持静态方法，并在客户端处理逻辑：根据 cookie 或 localStorage 呈现不同的组件。虽然它没有前两种方法的缺点，但我也不喜欢这种方法，因为由于客户端和服务器的初始渲染不同，所以当 DOM 被替换时，你会遇到“内容跳跃”（类似于这个一个，但我的情况具有更复杂的性质）。除了内容跳转之外，您在开发模式下会在控制台中收到警告：Warning: Did not expect server HTML to contain a ..., - 感谢react-dom（否则将更难跟踪此类问题）。

第三种选择似乎是最好的，但并不理想。我会暂时将这种方法用于我的事情，但我想至少打开对话来解决这个问题，并最终找到解决方案。

UPD。

看来你们甚至无法想象这是可能的。首先，让我解释一些幼稚的“立即”方法的问题（“立即”是因为它是出现在脑海中的第一个解决方案，而不是因为它“快速”）：

• 更复杂的样式避免内容跳跃。虽然可以设置恒定高度（而不是默认高度height: auto），所以整体页面高度不会改变，但这不仅是一个过于严格的约束，从设计角度来看很难处理（有时你只是不能给元素一个恒定的高度），但它也没有解决另一个问题：闪烁。

• 处理路由逻辑的自定义服务器，仅此而已。它甚至比选项 #2（使用 getServerSideProps）更糟糕——它全局禁用静态优化，不仅针对某个页面，而且针对整个应用程序。更不用说它不能部署到 Vercel。这是反 NextJSy。太糟糕了。

我花了一整天的时间来处理这个问题，现在让我描述一个可能解决问题的潜在方向：PWA 缓存。很快：它应该类似于选项＃1（具有两个不同的静态页面），但是通过管理 PWA 缓存解决了不同 url 的问题。

所以默认情况下我们显示一个页面，在某些用户交互之后，我们运行cache.put(request, response)， - 其中响应是第二个页面，所以我有点交换一个页面与另一个页面，然后，在访问这个 url 时，它最初显示有适当的元素，虽然 url 没有改变（引擎盖下的缓存正在使用另一个 url，但在浏览器中它是相同的 url）。在 MDN 上，有一个示例说明当您尝试恢复失败的请求时如何做到这一点，但也可以在任何事件上执行此操作：用户交互也是如此。

有用的网址

• 恢复失败的请求文章

• 使用 Service Worker 缓存文件一文

• cache.put文件

• CacheFirst策略文档（这里似乎是最合适的）

TL;博士

虽然我看到了使用 PWA 的潜在解决方案，但我不会急于庆祝这一发现， - 我还没有工作示例。我不确定我什么时候会有那个， - 很多事情要做，等等。但希望我有更多的时间，我会弄清楚这一点，并认为这个问题已经解决。可能不会很快。欢迎使用代码示例/要点/存储库。

我正在使用 Create React App 使用 React DOM Server 进行服务器端渲染。我正在尝试加载静态图像，但它没有显示在我的浏览器中。这是我的 app.js 代码

图像已复制到构建文件夹中，但未显示在浏览器 文件夹层次结构中

我在浏览器中收到以下错误