问题标签 [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.
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 组件，如下所示：
这样做的正确方法是什么？
node.js - 使用 React 进行服务器端渲染 - 可组合性 => 将子组件传递给父组件
只是想知道这是否可能。
我有一个像这样的父组件：
我想做的是使用道具将子组件“传递”给父组件。
像这样的东西：
通常，父组件将具有对其子组件的“硬编码”引用。但我正在寻找的是一种父 React 组件能够根据需要“采用”不同子组件的模式。
这可能吗？
也许正确的方法是这样的：
javascript - 使用 React 和随机生成的字符串进行服务器端渲染？
我第一次在我的 React/Redux 应用程序中尝试服务器端渲染。我现在遇到的一个问题是我需要初始状态有一个随机生成的字符串，然后将它作为道具传递给我的主要App组件。这显然会导致问题，因为它为客户端和服务器生成不同的字符串。我能做些什么来阻止这个问题的发生吗？
帮助理解的基本结构：
应用程序.js
还有我的减速机：
减速器.js
如您所见，我randomStr从我的 redux 商店获取并渲染它，但它在客户端和服务器中是不同的。任何帮助，将不胜感激！
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
任何帮助深表感谢
javascript - 使用客户端和服务器端渲染反应同构组件
我想创建一个同时具有客户端和服务器端渲染的反应应用程序。
这是示例：
在这个组件Main中，它需要在客户端呈现，除了<Record />
零件Record
这是我的问题：
ReactDom.renderToString我用和搜索了一些服务器端渲染示例react-router。但是，没有关于客户端和服务器端渲染的教程。
我想要实现的是，客户端首先加载和呈现组件<Main />，然后<Record />从服务器端加载。
另一个问题是，如何用 renderToString 加载样式模块 Record.css，因为我认为在这个 renderToString 中只能加载 html 的东西而不是 css。
react-dom - 将 Maquette 渲染为 HTML
我想获取我的 Maquette 视图的 HTML 字符串表示形式，以便将其预呈现为静态 html 文件。React 有 ReactDOMServer.renderToString。Maquette VNodes 有类似的方法吗？
ajax - React Server 端 TypeError：Router.use() 需要中间件函数但得到一个字符串
我正在尝试准备我的服务器以接收 ajax 调用。我正在尝试了解有关 React 的更多信息，并且一直在尝试弄清楚服务器端。大多数语法，我从我看过的不同教程中获取。server.js 确实与 postgres 数据库连接。但是一旦我尝试引入路线，应用程序就会崩溃。在 server.js 中，有一行我试图为读者突出显示。我用*********包围它。那时我试图引入路线（./routes/songs.js）。
这是一个 React 应用程序。数据库是带有 sequelize 的 postgres
我错过了什么并且做错了什么？
错误
服务器.js
song.js（路线）
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
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 中的根元素。
- Webpack
bundle.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 找到了解决方案：
node.js - 如何使用带有 babel-register 的 require 动态加载反应组件
我正在使用 babel-register 在节点环境中使用 ES6 类，并希望使用带有 ReactDomServer 的require( file_path ) 动态加载和渲染 React 组件，但它向我显示以下错误：
“不变违规：renderToStaticMarkup()：您必须传递有效的 ReactElement。”