问题标签 [react-server]

我正在使用 node.js 接受请求，从 dynamodb 获取数据，将其格式化/合并到现有的 JSON 模板对象中并返回它。

这在将节点用作 Web 服务并仅返回 json 时效果很好，但我正在测试在 react.js 中编写新的客户端代码。我知道我可以进行两次往返——首先加载没有 JSON 的页面，然后在 react.js 中使用 AJAX 加载 JSON，但我想一次性完成。

在节点中，我正在填写“filledTemplate”，并且我想返回 JSON 对象filledTemplate（通过 Jade 模板“forms”）以便在客户端访问。我可以将对象传递给玉，但我不确定之后的下一步。

长话短说，我不确定如何在客户端传递/访问 react.js（或 vanilla js）中的对象。

任何提示或指示将不胜感激。

（另外，react.js 显然没有标签，我不能添加它......如果其他人想要）

我从generator-react-server创建了一个简单的项目。一切正常。

我刚刚创建了新路由一个新页面和一个新组件，并为 home.js 更改了 hello-world.js（页面和组件）。

现在在运行npm start或react-server start服务器关闭时没有返回任何特定错误但以下日志（请注意，它在之前工作时已经记录了相同的消息）。

在使用generator-react-server加载 SVG 文件（如 follow）生成的 react-server 项目中会触发反应错误。

给出错误

我尝试像在之前的项目中那样为 SVG 加载器指定 webpack 文件加载器，但它不起作用。这是我在.reactserverrc中定位的webpack.conf.js文件"webpack-config": "./webpack.config.js"

这是我的反应组件：

也就是说，像这样在 jsx 中要求 SVG 是可行的：

我正在使用节点 v6.2.2 和以下模块

我一直在研究 react.js 框架。我还没有完全理解客户端和服务器端渲染之间的区别（尽管努力寻找明确的区别）。因此，我非常感谢善良的灵魂为这个主题提供清晰明了的解释？

顺便说一句，我来自 .NET 背景，因此我仍在尽我所能调整我的想法，转向更面向 JS 的编程方式。

谢谢！

我想知道是否有人遇到过ReactDOMServer.renderToStaticMarkup输出 pure HTML？

目前该功能renderToStaticMarkup正在将 React 元素合并在一起，这有点让我的应用程序变慢。

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

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

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

然后它还有其他问题。

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

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

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

我的项目基于create-react-app。npm start或者yarn start默认情况下将在端口 3000上运行应用程序，并且没有在 package.json 中指定端口的选项。

在这种情况下，如何指定我选择的端口？我想同时运行两个这个项目（用于测试），一个在端口3005，另一个是3006

require有没有什么好方法可以在没有 Babel钩子的情况下使用服务器端渲染？

现在我正在使用它jsx在服务器上编译和 ES6 模块导入/导出（因为它们在 中尚不支持Node.js）。我想我可以放弃进口/出口require，但我想留下来jsx。我遇到的 require hook 的主要问题是调试和服务器启动缓慢。

我知道有些人使用 gulp 加载源映射来解决调试问题，但这对我来说似乎有点矫枉过正。

所以我正在开发 POC 应用程序，它需要有 SEO 优化的内容（=== 在服务器上呈现）。但是在同一条路线中，可能会有来自不同来源的动态数据，并且可能需要一段时间才能捕获所有这些数据。SEO 不需要此动态数据，因此将实施异步加载。

到目前为止，我所拥有的看起来像这样（请记住，这只是示例）：

使用 ExpressJS 的 server.js（它的一小部分）：

// server.js app.get('*', (req, res) => { ReactRouter.match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {

所以你看到有 preRenderMiddleware 它返回已解决的 Promise ，这是我认为我可能错的部分：

所以我的问题是从服务器获取预期的标记 - 在 AboutContainer this.props.data 正在获取数据。但是，当客户端启动时， this.props.data 是未定义的。

任何人都可以指出一些好的解决方案吗？我确定我不是第一个遇到这个问题的人。我遇到了一些解决方案，但是客户端上所有重新请求的相同数据都是我希望避免的，这又会有点奇怪。

我也不想为此使用 Redux / 任何 Flux。

有什么想法吗？

我正在使用 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