问题标签 [isomorphic-javascript]

几个小时以来，我一直在尝试对 React 应用程序进行原型设计，但在尝试实现路由时遇到了困难。我遇到的错误是：

这是一个同构应用程序（在服务器和客户端上渲染），显然我读到的所有内容都提到了React 或 React-Router 被加载两次。但是我还没有看到解决这个问题的好方法以及导致它的原因（是 Gulp 配置还是只是跨文件导入 React 的方式？）。

这是我所拥有的：

服务器.js

索引.ejs

app.js（在 gulp 运行后会变成bundle.js）

路由.js

谢谢！

我想在 koa 中创建一个应用程序，它会在用户点击地址栏时呈现反应组件，然后是一个 react-router 客户端来浏览该呈现的反应组件内的链接。那可能吗？我希望初始加载对 SEO 友好。我还不能提供代码，但很想听听你们所有的建议和答案。

这将是想要的流程：

用户点击服务器（例如：localhost:3123/）--> KOA 将渲染将显示的反应组件（该组件上有反应路由器链接）--> 用户浏览链接（这次我不想再次访问服务器，所以我希望这一侧的反应路由器触发路由。

通过客户端路由时的源代码是否不会改变并不重要，我想要的只是用户第一次点击服务器时初始反应组件的源代码。这可能吗？

在为显示时间的 React 组件使用同构渲染时，我偶尔会遇到服务器在 point 渲染时间的问题A，但是当客户端作为 SPA 选择时，从 point 的时间A变为 point B，并且 React 抛出React attempted to reuse markup in a container but the checksum was invalid警告：

当您显示更细化的时间单位（如秒）时，错误的发生显然更加明显，但最好确保我不会在分钟、小时、天等边界上遇到这种情况。

有没有办法在客户端有效地告诉 React，“没关系，这里 DOM 的这一小部分可能与服务器端不同”？或者也许是我没有想到的另一种方式？

更多详情

我正在使用React-IntlFormattedRelative组件以友好的方式显示项目的创建日期。项目的创建日期在客户端和服务器之间当然保持相同（并在序列化的 Flux 存储中传递给客户端），但是服务器渲染和客户端渲染时间差刚好足够长，以至于渲染的 HTML 经常——但并不总是——不同。

目标：我正在尝试在nodejs和webpack中设置一个项目，以便 require 函数可以使用项目目录作为根目录，因此我可以在两种环境中使用相对于项目根目录的绝对路径（同构使用，即 React 服务器+客户端渲染）。

情况：在 webpack 中，您可以设置 config.resolve.root 以使其工作，但在 nodejs 中，最好不要覆盖/修改 global.require。

命题 1：我可以创建一个新的全局函数

所以它在节点中工作；但是，我找不到让 webpack 将“p_require”解析为__webpack_require__而不更改 webpack 源代码的方法。

命题 2：我可以创建一个新的全局变量

所以它在节点中工作

但是，webpack 会将此识别为动态 require。有没有办法让 webpack 解析 ROOT_DIR？我已经尝试过Define Plugin，但它似乎在 webpack 解析 require 后加载。

问题

任何人都有解决方案或面临同样的问题？

我有一个文件，我想要同时拥有 Node.js 和浏览器代码。

Node.js 代码不应在浏览器中可见。

webpack 可以根据环境从文件中排除代码吗？

有点像 C 预处理指令。#if #else, etc.

我知道 Webpack 非常密集地解析代码，这让我认为它可以。

约束

• Node.js 代码无法进入浏览器，因为它可能包含敏感的配置选项。

• 我希望浏览器和节点代码在同一个文件中。我知道我可以使用webpack.IgnorePlugin忽略文件基础上的要求，或者将共享代码放在浏览器文件中并要求来自服务器（我现在正在这样做），但我想知道是否有可能拥有代码并排在同一个文件中。

编辑：这是我正在尝试做的一个例子。

我在 Docker 容器上有一个带有Play 2.3.x的 rest api。此 api 与PostgresSQL 9.4数据库（也在 Docker 容器上）对话并提供 JSON。Client 是一个带有 React 的同构应用程序（也在 Docker 容器上）。

当客户端更改路由时，会向 api 发送多个请求。问题是每个请求都异常缓慢。例如，我有这个 uri：

当我从浏览器直接发送这个请求时，响应显示在 4s 结束时。当这个请求与其他请求一起发送时，需要多 12 秒。

什么会导致这个时间？

当然，api 的每一个动作都是异步的。例如，geojson 动作：

每个请求是否应该在另一个线程中处理？

编辑

所以，经过几次测试，这只是我的开发计算机速度慢。实际上，在其他计算机上响应时间是正常的。

我正在尝试使用具有数据获取功能的 express 和 react-router 构建一个同构应用程序，并首先呈现服务器端和数据操作客户端。

我设法获取初始数据服务器端并渲染 jsx 组件，但它仅在直接命中 url 时才有效，而不是跟随链接。事实上，正如我读过的所有示例一样，该应用程序只在服务器端渲染一次，然后一切都发生在客户端。

另外，如果我获取一些数据，在服务器端呈现组件，然后点击链接，则新页面的数据不会更新。

我不知道我是否在尝试做一些没有意义的事情？

我想获得的是：

• 每个页面的预渲染服务器端，无论用户是直接到达还是通过链接到达
• 仅获取与路由对应的组件所要求的所需初始数据
• [BONUS]对组件的布局进行小的更改（标题、附加 css 等）

这是我到目前为止所拥有的：

快递应用：

路线.js：

布局.jsx：

主页.jsx：

东西.jsx：

我错过了什么，误解，做错了什么？

我想在客户端和服务器上共享一些业务逻辑。

假设它是一个文件 API，我想知道一个项目是否具有文件夹类型。

在服务器上它看起来像这样：

目前是否可以以简单的方式向客户公开这一点？

我们也在使用 loopback-sdk-angular。与之相结合是最终目标。

做这个的最好方式是什么？

我指的是以下示例以获取反应的同构示例。

https://github.com/mhart/react-server-example

如果我在浏览器中禁用 javascript，则页面会从服务器端呈现，并且添加按钮不起作用。

另一个问题是在 server.js 文件中 html 是使用 React.renderToStaticMarkup 生成的。在此示例中，只有一个反应组件，因此数据被传递给该组件。如果我有超过 1 个组件并且我必须将数据传递给每个组件怎么办。我怎样才能做到这一点？

我正在为我的同构应用程序寻找最佳的技术/架构选择。以下是我的限制，由于已经开发的内容，我们需要什么以及我们喜欢什么：

• React.js中的所有前端，包括布局、子组件等。
• 通量架构
• 正如我所说，服务器端渲染（当前服务器是基于 express.js 构建的，它可以更改，但如果我们可以保留它，它将节省一些时间）
• 非常简单/灵活的路由器，比如 react-router 甚至只是一个 json 路由：组件，我不知道
• 每个组件都应该能够在渲染之前请求它需要的数据
• 每个组件都应该能够有一个特定的上下文（设置页面标题、插入特定的 css、设置元标记等）

需要明确的是，我们需要能够在应用程序上添加页面/功能，只需在路由器文件中说“此路由需要在此布局内渲染此组件”，并且该组件应该是独立的，询问“好的，之前一切，我需要这些来自 api 的数据，然后，我需要这个 css 文件，我的标题是'title'，等等。”。

我们目前的架构是一团糟，不可维护，不可扩展，不够灵活：

使用 Express.js 路由器，我们在每个路由上设置上下文信息，进行 api 调用，然后使用特定的 css 和 js 渲染一个 jam 文件，我们在其中插入 jsx 组件。这是一个例子：

路由器.js

个人资料.jade

配置文件.jsx

随着项目的发展，我们越不满意。

我们一直在尝试探索的解决方案是：

• yeoman 生成器 react-fullstack：https ://github.com/kriasoft/react-starter-kit/tree/yeoman-generator > 我们发现它非常复杂，我们没有管理如何简单地为每个组件获取数据。尽管这正是我们需要的每个组件的上下文。

• express.js + react-router：客户端路由（使用react-router）和服务器端路由，http ://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/ >同样的数据问题，我们'无法设置上下文。此外，我们对初始渲染服务器端以及所有客户端都不太满意，这与我们目前所拥有的相反。

我们觉得没有什么是真正适应的，而我们没有开发一些真正特别的东西，只是一个从 api 读取/写入数据的平台。

对于我们的约束，什么是最好的、简单的、灵活的、清晰的架构？我们需要做哪些选择？