问题标签 [isomorphic-javascript]

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.

0 投票
1 回答
141 浏览

javascript - 带有 RequireJS 的同构 JavaScript

我有一些同构的 JavaScript。我在客户端使用 RequireJS。

有没有办法避免必须将require语句放置在wrapper函数调用之前?

如果我省略该require语句,RequireJS 会抱怨尚未为上下文加载依赖项。

我认为这是 RequireJS 提前解析和识别所需依赖项的能力的一个不可逾越的限制。

0 投票
1 回答
209 浏览

reactjs - 试图了解同构反应应用程序应该如何进行客户端路由

请原谅我的英语,它是第二语言。与常规客户端 SPA 相比,同构应用程序的全部意义在于,客户端最初不必下载整个 JS 文件,这会导致初始加载时间非常慢。

我一直在尝试自学服务器端渲染的 React,在观看了无数关于这个概念的视频和无数关于实际实现的教程之后,我仍然无法理解这一点(至少我是这样理解的):

尽管服务器在 url 更改时有条件地渲染页面并向客户端发送 props,但客户端仍然使用包含应用程序所有入口点的路由器(通过要求所有入口点,然后根据 url 位置加载文件) . 这是否意味着所有文件都包含在主客户端 JS 文件中,因为客户端路由器已经需要它?这不会破坏服务器渲染的 React 的全部目的吗?还是我想错了?

简而言之,同构 React 应用程序如何真正与包含(通过要求)应用程序所有入口点的客户端路由器一起工作?

0 投票
2 回答
253 浏览

node.js - 同构通量 - 在服务器上获取组件的数据

在我最近的应用程序中,我一直在根据请求在服务器上使用 Flux(使用 Flummox - http://acdlite.github.io/flummox)来进行同构渲染。一般来说,它看起来如下:

如您所见,我一直在通过 api 服务接收数据,但是一些 React 组件自己在客户端发出请求。

他们通过调用flux.getActions('items').getSomeDataAsync容器组件中的操作来做到这一点(在componentDidMount生命周期方法中)。

我的问题 -是否有可能(根据您的经验)在容器组件内部有一些方法将在服务器上调用以在其中调用异步操作?

0 投票
2 回答
1383 浏览

javascript - 用客户端路由反应服务器端渲染

我的主页路由 ( / ) 的初始服务器渲染工作正常。

此外,随后的客户端导航到 ( /#/page2 ) 工作正常。

但是,如果我直接从地址栏加载 /#/page2,则服务器渲染的主页首先会在浏览器中加载,然后明显转换到 /#/page2,这不是我想要的。我只想显示 /#/page2 而无需先刷新主页。

发生的事情是该节点正在为对 / 的请求提供主页,然后当响应到达客户端时,客户端正在运行 /#/page2 的路由处理程序。两者的行为都正确。但这不是我想要的。

我该如何避免这种行为?

我认为我需要一种让服务器和客户端都知道不同路由并且都能够处理它们(同构)的方法,但是,服务器不知道 url 的片段部分。

其他人有这个问题吗?

这个问题不是特定的反应。它是特定于 SSR 的深层链接。

我的节点路由器处理“/”如下

index.ejs 只是:

0 投票
2 回答
9284 浏览

flask - 使用 ReactJS 和 Flask Python 在同构应用程序中管理“窗口”对象

我正在开发一个带有 Flask 后端和 ReactJS 前端的应用程序。ReactJS 应用程序已开发并与 webpack 捆绑在一起。

一切都适用于捆绑在一起的客户端渲染webpack

我现在正在尝试使用python-react添加服务器端渲染。

但问题是,我必须通过具有根组件 nodeJinja2 template的基本模板将一些变量共享给我的 ReactJS 应用程序。index.htmlreactjs<div id='react-node'></div>

我必须通过下面的模板将我的routes和发送config到我的应用程序,jinja2

以上所有 js 变量都被设置为 global windowobject 。

但是当我试图在 python 中渲染组件时,它会抛出windowobject异常ReactRenderingError: react: ReferenceError: window is not defined

解决此问题的最佳方法是什么?

0 投票
1 回答
68 浏览

javascript - 路由获取参数和app逻辑

我有一个端点/,这个端点有时会传递不同的 oAuth 获取参数并登录到应用程序。

我在下面构建了一个用于委派这些请求的函数,称为queryAction. 像这样的平台express允许您在path关卡而不是res.query关卡进行路由,因为没有路由就无法拥有res.query

例如,如果我有/?shop=thomas并且/?login=thomas&code=7我希望用户在app.get("/")回调中做不同的事情,不同的返回函数。

下面是一些代码,它接收一个查询对象并根据应该执行的操作返回一个字符串。

使用此代码,我可以检查是否存在相应的函数并运行它。

其中一些函数将执行一些数据库任务或其他异步任务并重定向用户或呈现视图。我很难兼顾 express 应该处理什么(或者如果我什至需要它)和 React 应该处理什么。

  • 因为我想要运行服务器端的相同版本的 React,是否可以有只运行服务器端并从客户端中剥离出来的代码,比如从客户端版本的 react 中删除秘密 oAuth 密钥?
  • React 是否能够像上面那样将参数路由到不同的视图/操作?
  • React 不再是视图引擎的地方是什么?
  • react 是否能够在推送之前渲染出仅服务器端的代码并从客户端删除部分?
0 投票
1 回答
982 浏览

javascript - 在同构 javascript 中处理 HTTP 请求

我有一个纯粹的前端 javascript 项目,其中包含许多模型,这些模型封装了与各种 RESTful Web 服务的不同交互。我的目标是将这些模型放入它们自己的 npm 模块中,以便让它们在我正在编写的新节点应用程序中使用服务器端。

模型使用 XMLHttpRequest 对象,这显然在服务器上是未定义的。我的模型中不能 require('http') ,因为当我尝试为客户端构建时,browserify 会抛出错误。

我如何处理可以在服务器和客户端上工作的 HTTP 请求?我想要的是这样的:

0 投票
0 回答
262 浏览

node.js - 如何在服务器和客户端上完全渲染 React 组件?

我需要制作 ES6+ 同构 javascript 应用程序,它可以在第一次请求时在服务器上呈现带有数据的整页(或客户端上没有 js)并使用客户端呈现进行导航。

有两个模块可以进行异步渲染 - react-asyncreact-nexus。React Async 可以从 React 组件发出 XHR 请求,但需要 node-fibers 插件,React Nexus 可以制作服务器端 Flux 存储,我不明白如何使用它来从 React 组件中的 API 获取简单的同构数据请求。

0 投票
1 回答
8675 浏览

javascript - Node.js React:无法添加属性上下文,对象不可扩展

我目前正在尝试在我的 node.js + express 构建中实现同构反应组件。但是,当我尝试将所述组件包含到我的翡翠模板中以呈现它时,我收到此错误:TypeError: Can't add property context, object is not extensible

这是我的路线文件:

组件:

此外,我的 gulp 任务会引发警告说警告:组件(...):render在返回的组件实例上找不到方法:您可能忘记render在组件中定义,或者您可能不小心尝试渲染类型为函数的元素那不是一个 React 组件。警告:不要设置 React 元素的 props 属性。相反,在最初创建元素时指定正确的值。

谁能帮我?非常感谢

0 投票
1 回答
404 浏览

javascript - 多 React 组件架构

我正在创建一个使用数据 API 的实时仪表板。该应用程序是一个构建在节点 API 之上的同构反应应用程序,我使用的是 Flux 架构,更具体地说是alt 实现

我的问题是仪表板有大约 4/5 个实时图表(我使用的是 React D3 库),每个图表都调用一个 API 端点。我有一个主要<Dashboard />组件,其中每个图表组件都存在。我的问题是应该<Dashboard />负责监听数据并将其作为道具传递,还是每个图形组件都应该负责自己的存储/动作生命周期?如果我将数据作为道具传递,这是否意味着 UI 会重新渲染超过所需的内容?

我还没有找到任何 React/Dashboard/Charting 应用程序的示例,所以如果有人知道这将非常有用。