问题标签 [react-dom-server]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

60 问题
Newest
Active
Bountied
318
Unanswered
0 投票
0 回答
190 浏览

javascript - 使用 React 进行服务器端渲染 - 对我们是否仍然需要模板感到困惑

我在看这个项目 https://github.com/DavidWells/isomorphic-react-example

我打开了这个问题 https://github.com/DavidWells/isomorphic-react-example/issues/25

我们还需要使用 HTML 模板文件吗？... 或者我们可以只在后端使用 React 组件，然后像这样渲染：

React 允许<html> <body> and <head>标签吗？

如果是这样，我可以创建一个可以充当模板的父 React 组件，如下所示：

这样做的正确方法是什么？

0 投票
2 回答
460 浏览

node.js - 使用 React 进行服务器端渲染 - 可组合性 => 将子组件传递给父组件

只是想知道这是否可能。

我有一个像这样的父组件：

我想做的是使用道具将子组件“传递”给父组件。

像这样的东西：

通常，父组件将具有对其子组件的“硬编码”引用。但我正在寻找的是一种父 React 组件能够根据需要“采用”不同子组件的模式。

这可能吗？

也许正确的方法是这样的：

0 投票
1 回答
1374 浏览

javascript - 使用 React 和随机生成的字符串进行服务器端渲染？

我第一次在我的 React/Redux 应用程序中尝试服务器端渲染。我现在遇到的一个问题是我需要初始状态有一个随机生成的字符串，然后将它作为道具传递给我的主要App组件。这显然会导致问题，因为它为客户端和服务器生成不同的字符串。我能做些什么来阻止这个问题的发生吗？

帮助理解的基本结构：

应用程序.js

还有我的减速机：

减速器.js

如您所见，我randomStr从我的 redux 商店获取并渲染它，但它在客户端和服务器中是不同的。任何帮助，将不胜感激！

0 投票
0 回答
1412 浏览

reactjs - React-Router 通过服务器重定向

所以我正在开发一个需要以下路径的链接的网站：

重定向到外部 URL，例如 google.com?affiliateID=2。重定向需要为 nofollow，状态码为 307。

该应用程序是通用的；使用 express 和客户端反应的服务器端渲染，两者都使用通过 react-router 的共享路由。

路由.js

服务器.js

在这里，我通过检查状态 307 来检查请求的路线是否是 /visit/slug。如果是这种情况，它将重定向到目的地。这行得通。

然而，我现在面临的问题是，我有数百个附属链接，具有不同的 URL，每个链接都有相应的 slug。

以编程方式为正确的 slug 输入正确 url 的最佳方法是什么？在路线中，我可以提供道具

我可以从 server.js 访问它，但我不确定如何根据 slug 使那个动态。

或者我应该对 server.js 上包含所有 slug 及其相应 URL 的数据库进行 API 调用？

或者有没有一种方法可以将道具从用于单击链接的组件传递给 Route？IE

任何帮助深表感谢

0 投票
2 回答
844 浏览

javascript - 使用客户端和服务器端渲染反应同构组件

我想创建一个同时具有客户端和服务器端渲染的反应应用程序。

这是示例：

在这个组件Main中，它需要在客户端呈现，除了<Record />

零件Record

这是我的问题：

ReactDom.renderToString我用和搜索了一些服务器端渲染示例react-router。但是，没有关于客户端和服务器端渲染的教程。

我想要实现的是，客户端首先加载和呈现组件<Main />，然后<Record />从服务器端加载。

另一个问题是，如何用 renderToString 加载样式模块 Record.css，因为我认为在这个 renderToString 中只能加载 html 的东西而不是 css。

0 投票
1 回答
252 浏览

react-dom - 将 Maquette 渲染为 HTML

我想获取我的 Maquette 视图的 HTML 字符串表示形式，以便将其预呈现为静态 html 文件。React 有 ReactDOMServer.renderToString。Maquette VNodes 有类似的方法吗？

0 投票
1 回答
450 浏览

ajax - React Server 端 TypeError：Router.use() 需要中间件函数但得到一个字符串

我正在尝试准备我的服务器以接收 ajax 调用。我正在尝试了解有关 React 的更多信息，并且一直在尝试弄清楚服务器端。大多数语法，我从我看过的不同教程中获取。server.js 确实与 postgres 数据库连接。但是一旦我尝试引入路线，应用程序就会崩溃。在 server.js 中，有一行我试图为读者突出显示。我用*********包围它。那时我试图引入路线（./routes/songs.js）。

这是一个 React 应用程序。数据库是带有 sequelize 的 postgres

我错过了什么并且做错了什么？

错误

服务器.js

song.js（路线）

0 投票
0 回答
342 浏览

node.js - 通过避免 NODE_ENV 检查来改进 React 服务器端渲染的最佳方法

我正在使用 require('babel-register') 来允许在 node.js 中使用 ES6 并对我的 react 组件进行服务器端渲染。

在本次演讲中（7:14 左右开始） https://youtu.be/PnpfGy7q96U?t=7m14s

将 React 服务器端渲染性能提高 30% 以上的一项主要建议是将 ReactDOMServer 指向构建的客户端版本

例如，代替 var ReactDOMServer = require('react-dom/server') 使用 var ReactDOMServer = require('react/dist/react.min')

速度提高的原因是因为客户端版本避免了对 process.env.NODE_ENV 的检查，结果证明这是一项昂贵的操作。

这个技巧以前似乎很管用，但在 React 15 中，客户端代码不再直接公开 renderToString 和 renderToStaticMarkup 的方法。相反，它隐藏在看起来很吓人的属性 __SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 后面：

因此，您可以执行类似 var ReactDOMServer = require('react/dist/react.min').__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

但显然这似乎不是一个好主意（可能不会与 React 的未来版本向前兼容）。

我试过 require('react/dom-server/dist/react-dom-server.min') 但这会返回一个'未定义'（我相信包装代码是为了在客户端而不是服务器上运行）。

是否还有其他更受认可的建议来实现这种性能提升？

作为参考，此处记录了原始问题，但问题似乎已关闭： https ://github.com/facebook/react/issues/812

0 投票
0 回答
381 浏览

reactjs - 在服务器端路由和渲染 React 组件

我很难弄清楚我们应该做些什么来使 React 同构。我正在学习一些教程，这就是我现在所拥有的：

  • 我创建了一个server.js启动 Express 服务器的文件
  • 我创建了一个router.js文件，在其中创建了一个 Express Router 对象，导入了ReactRouter( react-router) 和ReactDOMServer( react-dom/server)，并在那里设置了一个 Express 路由 ( router.get('*'))，它获取 ReactRouter 试图找到一个渲染路由 ( ReactRouter.match)
  • 出于捆绑的目的，我创建了一个包含ReactRouter指令的 allRoutes.js 文件。我设置了两条路径，/并且/about
  • Main和两个组件，About每个组件都有一个按钮和一个单击事件。Main必须在 '/' 中呈现，而 About 在 '/about' 中。两个组件都有HTML,HEAD和BODY标签，它们引用到bundle.js
  • app.js 将 React 设置为 DOM 中的根元素。
  • Webpackbundle.js从 allRoutes.js 文件创建

我遇到了几个问题，第一个是：

  • Main 已正确呈现并且 Javascript 工作正常，但是转到localhost:3000/about，页面加载大约需要 5 秒，它加载时没有 javascript 行为，并且我收到校验和错误。

  • 从 /about 中删除 bundle.js 解决了校验和和重载问题，但没有 Javascript 行为

  • 从 allRoutes.js 捆绑不会出现上述错误，但我没有在页面中工作的 javascript（尽管它是用 bundle.js 编写的）

  • 将 /about 设置为 / 的子路由，因为 Main 不会导致问题，所以永远不会加载 About 组件。仅当路由匹配时，服务器才会呈现 Main。

正如我计划的那样，但我不确定这是为了实现同构行为我应该做的，我正在这些根组件中创建一个完整的 HTML 页面，即 About 和 Main。在我看来，对 SEO 更友好。

有什么我做错了吗？

应用程序.js

路由器.js

路由.js

网页包

about.js

服务器.js

@编辑

我将 allRoutes (routes.js) 更改为此。

现在 About 是 Main 的孩子，Javascript 在 Main 中工作，但 About 从未加载。尝试访问不存在的路由会显示 404，但任何映射的路由都会呈现 Main。到底是怎么回事？

@resolved 找到了解决方案：

https://github.com/victorsferreira/react-isormorphic/

0 投票
1 回答
2933 浏览

node.js - 如何使用带有 babel-register 的 require 动态加载反应组件

我正在使用 babel-register 在节点环境中使用 ES6 类，并希望使用带有 ReactDomServer 的require( file_path ) 动态加载和渲染 React 组件，但它向我显示以下错误：

“不变违规：renderToStaticMarkup()：您必须传递有效的 ReactElement。”


12345678910