问题标签 [isomorphic-javascript]

我有一个在浏览器和服务器上运行的同构 React 应用程序。我通过两个不同的入口点和不同的配置运行两个单独的 Webpack 构建，为两者构建相同的代码。

问题在于，通过外部脚本标记（在本例中为 Google 地图）存在于浏览器窗口中的外部文件在服务器上的节点中运行时显然不存在。除了入口点文件之外，代码是相同的。

索引.html：

简化配置：

组件：

我的问题是我应该如何处理这个？

我目前有一个我并不热衷的解决方案。

我一直在研究 react/flux/react-router 以及如何在服务器中预渲染虚拟 DOM。在服务器中调用Router.run()andrenderToString将负责在服务器中预渲染页面并延迟加载和下载其余的 .js 文件到客户端。React-router在任何场景（客户端或服务器）中处理UI URL 。这不一定与服务器的REST API URL相同。

如果我想将后端用于具有 REST 功能的本机应用程序，添加路由功能的最佳做法是什么。我是否应该为 express.js 提供一套完整的路由定义并重新定义 react-routes 中的所有路由？

React 路由不一定类似于 express 路由（可以有或多或少的路由模式）。所以复制路由定义似乎是不可避免的。那是对的吗？即使这个例子似乎也在做同样的事情。

我希望找到一种方法来重用路由定义或更干燥的东西。

只有在 http 请求得到解决后，我才能找出让服务呈现我的反应组件的最佳方式。

例如：

组件 A <- 组件 B <- 组件 C（C 触发一个操作，该操作调用 API 并返回要渲染的数据，同时仅渲染“加载”）。

在检查我的源代码时，我只看到“正在加载”，并且出于 SEO 的目的，希望服务器等到组件 C 的调用已解决并呈现。

从理论上讲，这听起来很容易，因为服务器应该自己调用该操作并等到该操作完成然后调用react.renderToString()，如下所示：

但是如果多个组件发出动作调用，我需要等待多个动作解决然后调用renderToString

相反，请求是在客户端接收的。我的服务器文件：

最好的方法是什么？

I'm building an isomorphic application. It is completely built with react -- namely, the html base is also in react.

I have my root html as an app component.

It looks something like this:

When I build the project with webpack, I need to replace js/bundle.js to include the hash.

Webpack delivers the stats.json after it is finished. But I need to have the hash available during build time.

I was thinking of using the feature flags to do something like:

Which would ideally inject the right hash reference into the built js.

It's a bit tricky since it is self referencing. Is there a better way to do it? Modifying the built code after webpack has finished seems counterproductive. I've also thought about having the client simply request bundle.js, but have my node server serve the hashed file.

What would be a proper solution to this caching?

随着 Javascript 不断扩展和覆盖 Web 开发中的大部分层，Isomorphic JS（编写可以在客户端或服务器端运行的软件）正在成长为 Web 应用程序的新范例。

好处是显而易见的，但服务器端渲染是迄今为止同构的关键特性之一。

我没怎么玩过它，想把它应用到生产项目中。

所以，问题是：Node 是否成熟到足以为大型项目渲染服务器端？你有没有发现任何陷阱？可维护性如何？

所以，我最近一直在摆弄一些同构的 React + Flux，老实说，我发现一些概念相当混乱。我一直在研究有关如何构建同构应用程序的最佳实践，并正在寻求建议。

假设您正在创建一个 web 应用程序以及一个由相同 REST API 支持的移动应用程序。您是否将 REST API 与 webapp 捆绑在一起？我见过有人提倡捆绑并为 REST API 提供单独的代码库。

任何建议或建议阅读表示赞赏！

我试图让 Koa 同构渲染它从 react-router 接收到的 html 字符串。

这是我一直在努力工作的代码：

服务器.js

路由.js

main.js

出现几个错误：

警告：Component(...)：render在返回的组件实例上找不到方法：您可能忘记render在组件中定义，或者您可能不小心尝试渲染类型不是 React 组件的函数的元素。

警告：不要设置 React 元素的 props 属性。相反，在最初创建元素时指定正确的值。

TypeError：无法添加属性上下文，对象不可扩展

警告：有些东西直接调用了 React 组件。请改用工厂或 JSX。见：https ://fb.me/react-legacyfactory

我正在将 ES6 转换为 ES5。

1. BabelJS 用于 NodeJS Express 服务器文件和服务器端渲染输出到目录 build/server/。
2. Browserify + babelify 将 ReactComponents 输出到 build/client/bundle.js 文件

当尝试将 React 组件从 build/client/bundle.js 导入到 build/server/ 文件时，应用程序崩溃，因为我正在导入一个未转译的 ReactComponent。

如何在不复制服务器中的代码的情况下导入 ReactComponent（重用来自 client/bundle.js 的代码）？

使用 webpack 配置中的插件部分，我已经成功地将 webpack 开发服务器与节点服务器（express）一起正确使用。

一切正常，但现在我尝试同构并在 express 应用程序中使用客户端组件。

到目前为止，我遇到的唯一问题是，如果没有 webpack“解析”我的服务器端代码，我会遇到需要组件但路径没有解决的情况

IE

在组件内部

我应该以其他方式配置 webpack 还是必须将所有导入更改为有效的服务器端？

代码库在这里，以防您想查看实际状态https://github.com/vshjxyz/es6-react-flux-node-quickstart

我有一个提供给客户的 EJS 视图：

索引.ejs

main.bundle.js是我使用 browserify 创建的包：

gulpfile.js（部分）

最终为客户提供以下代码：

main.js（捆绑到 main.bundle.js 中）

但是，即使浏览器请求并接收main.bundle.js脚本，客户端也不运行该alert('hi');行，这使我相信该React.render行也不起作用。我可以确认 Javascript 已启用，并且我的浏览器是最新版本的 Chrome。我的反应组件（Login）如下：

login.react.js

所以，很简单。但是，您在代码中看到的任何警报都不会运行。该console.log('rendered');行从未在服务器上运行，但是当我检查页面的源代码时，我得到：

我的页面的 HTML 输出

这意味着服务器正确地呈现了我的反应组件，但是为什么客户端脚本不起作用？该handleClick函数永远不会运行，我的console.log线路永远不会运行，线路也不会运行alert。怎么了？reactid 和校验和正确呈现，它不应该工作吗？客户端的 React 代码不应该足够聪明地找到组件并正确运行吗？