标签: isomorphic-javascript

我正在尝试使用webpack来捆绑在服务器端和客户端呈现的反应代码.我正在尝试使用的一些库(如glidejs)完全假设它们正在浏览器中执行.

我实际上并没有使用lib,直到componentDidMount或其他一些不会在服务器上执行的点.

我怎么能要求它们,但基本上只是让它们在节点环境中什么都不做？

Glidejs特别想要jquery,window和document.给它jquery似乎很好,但我不知道如何处理窗口和文档.

关于同构通量应用程序中存储数据填充的问题.(我正在使用react,alt,iso和node,但理论适用于其他示例)

我有一个需要从api获取数据的flux'store '(http://alt.js.org/docs/stores/):

getState() {
   return {
       data : makeHttpRequest(url)
   }
}

当用户浏览SPA时,将通过http请求加载更多数据.

我希望这个应用程序是同构的,以便我可以渲染应用程序完整的HTML,包括最新的数据服务器端,并将其返回给用户,以便快速初始页面加载.

react.renderToString()让我将应用程序渲染为html,我可以使用alt和iso播种数据,如:

storeData = { "MyStore" : {"key" : "value"}}; // set data for store
alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data

var content = React.renderToString(React.createElement(myApp)); // render react app to html

问题是我在运行js服务器端时会看到错误,因为商店想要发出一个它无法做的http请求(因为xmlhttprequest不存在于节点中)

什么是解决这个问题的最佳方法？

我能想到的唯一解决方案是从商店包装httprequest:

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    ...

    if (ExecutionEnvironment.canUseDOM) {
        // make http request
    } else {
        // do nothing
    }

有更好的想法吗？提前致谢.

我希望我的基于React的SPA能够在服务器端呈现(这些日子不是这样).因此,我想将React与react-router,redux和一些构建层结合起来,就像isomorphic starterkit一样.

有hapi通用redux连接在一起,但我正在努力如何组织我的流程.我的数据来自REST API的多个端点.不同的组件具有不同的数据需求,应该及时在客户端上加载数据.在服务器上,必须获取特定路由(组件集)的所有数据,并将必要的组件呈现给字符串.

在我的第一种方法中,我使用redux的中间件来创建异步操作,这些操作加载数据,返回一个promise,并SOME_DATA_ARRIVED在promise解析时触发一个动作.Reducers然后更新我的商店,组件重新渲染,一切都很好.原则上,这是有效的.但后来我意识到,在路由发挥作用的那一刻,流程变得尴尬.

列出许多数据记录的某个组件具有多个用于过滤记录的链接.每个过滤的数据集都应该通过它自己的URL来获取/filter-by/:filter.所以我使用不同的<Link to={...}>组件来更改点击的URL并触发路由器.路由器应根据当前URL表示的状态更新存储,这反过来导致相关组件的重新呈现.

这不容易实现.我componentWillUpdate首先尝试触发一个动作,异步加载我的数据,填充存储并为我的组件引起另一个重新渲染周期.但这不适用于服务器,因为只支持3种生命周期方法.

所以我正在寻找正确的方法来组织这个.用户与应用程序的交互(从用户角度更改应用程序状态)应更新URL.IMO这应该使路由器以某种方式加载必要的数据,更新商店,并开始对帐过程.

所以interaction -> URL change -> data fetching -> store update -> re-render.

这种方法也应该在服务器上工作,因为从请求的URL开始,应该能够确定要加载的数据,生成initial state并将该状态传递给storeredux 的生成.但我找不到妥善做到这一点的方法.所以对我来说,出现以下问题:

1. 我的方法是错误的,因为有一些我不理解/不知道的东西？
2. 在redux中保持从REST API加载数据是正确的store吗？
3. 拥有保留state在redux中的组件store以及其他state由自己管理的组件是不是有点尴尬？
4. 这个想法是interaction -> URL change -> data fetching -> store update -> re-render完全错的吗？

我愿意接受各种建议.

我已经在这个回购中基于入门套件松散地构建了一个同构的React应用程序.它使用webpack来构建生产代码.

事实上,我需要将服务器上的一些环境变量的值暴露给浏览器中的客户端代码,而无需重建生产代码.我希望能够更改env变量的值,并让它在下一页刷新客户端的效果,而不必重建任何东西.我不想让测试复杂化.

我找到了一些解决方案,其中没有一个很好:

1. 使用DefinePlugin for webpack将某些环境变量的值硬编码到生产代码中.类似于此处概述的内容
2. 构建API只是为了将env变量拉入客户端.
3. 编写一个特殊的.js文件,该文件位于webpack系统之外.此文件将被模板化,以便在将其提供给客户端之前进行修改.可能要求env变量值存储在'window'或其他东西上的特殊全局变量中.

这些方法的问题:

1. 被拒绝.这不符合我的要求.如果我更改env变量的值,我需要重建代码.
2. 不必要的复杂.我不需要这个API用于其他任何事情.一个完整的API只是为了提供很少改变的2或3个值？需要复杂性来确保在加载时从API ASAP中提取值.
3. 最近,但有点粗糙.如果我可以避免它,我真的不想去webpack/React/Flux系统之外.在窗口对象上创建特殊的全局变量会起作用,但会为测试使用这些全局变量的组件/存储/操作带来复杂性.

我过去做过2和3,从来没有真正满足这些解决方案.

有什么建议？这似乎应该是一个常见/解决的问题.也许我只是在思考它,3是要走的路.

使用React和其他框架,现在通常使用npm和package.json来安装您将在前端使用的库.如果您正在开发通用/同构应用程序,这会引入前端和后端的依赖项存储在同一文件中的问题,从而创建一个大规模的依赖项列表.

如果你使用npm --save/ - save-dev两种类型的依赖项(前端,后端)变得混合,很难知道,而不是一个接一个地使用哪一个.

除了手动排序和管理依赖列表之外,还有什么方法可以使列表保持整洁？您管理依赖项列表的策略是什么？

我已经阅读了有关同构应用程序开发的内容,并且我已经看到了在服务器端处理资源加载的方法.
一个是webpack-isomorphic-tools.
另一个是"hack",你在webpack中定义一个插件,它将process.env.BROWSER设置为true,并根据该变量加载资源.即:

if(process.env.BROWSER){
  require('./styles.scss');
}

我想知道,哪个更好,为什么？

我有一个Vue.js应用程序使用服务器端渲染(SSR),然后客户端水合,它工作得很好.我喜欢构建同构的javascript并认为它是未来的方式.

但是我还有一个问题需要解决.这是一个简单的图表:

首先,我们检查是否有缓存的HTML响应

如果我们没有缓存,那么我们:

1. 执行服务器端呈现(SSR)以从vue.js应用程序呈现HTML
2. 然后我们保存到缓存
3. 并向客户发送回复
4. 此时我们安装vue.js应用程序并进行客户端水合作用.

这个流程我已经失败并且工作得很好.我想弄清楚如何用蓝色做一步.

如果我们有缓存,我想:

1. 加载html,就像客户端水合装载vue.js应用程序并更新缓存的html片段然后仅对当前用户是唯一的(即帐户信息,喜欢,跟随等)
2. 向客户发送回复
3. 然后就像之前做客户端水合作用,使页面互动.

我做了一些研究,我找不到任何有关服务器端水合作用的信息.我甚至调查了其他异形framworks,如react和angular 2,看看他们是否有解决方案,但找不到一个.

我不介意建立这样的东西,但我需要向正确的方向推进,所以如果有人正在处理这类事情或有任何建议,非常感谢.

我无法修复此错误...我启动服务器,一切正常,因为我刷新localhost:3000然后它显示一个错误:

TypeError:(0,_reactRouter.match)不是函数

我安装了"react-router":"^ 4.0.0"

import Express from 'express';
import {RouterContext, match} from 'react-router';
import {renderToString } from 'react-dom/server';
import React from 'react';
import routes from './routes.js'



var app = new Express();
app.set('view engine', 'ejs');
app.set('views',__dirname);


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

            if (err) {
                return res.status(500).send(err.message);
            }

            if (redirectLocation) {
                return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
            }

            var markup;
            if (renderProps) {
                // if the current route matched we have …

我应该如何在我的 reactjs + express 中实现检测移动设备？我使用mobile-detect来确定是否移动，但首先我实现了它，const md = new MobileDetect(window.navigator.userAgent)但我记得window当它加载服务器时不存在。express 部分中的示例应该可以工作，因为这是我唯一可以访问的地方，req但是我如何将它传递到我的 React 应用程序中以供之后使用？

更新

// app.js

...
import { routes } from './routes';
import { match, RouterContext } from 'react-router';
import { renderToString } from 'react-dom/server';

...
const app = express();
app.use(express.static('public'));

app.set('view engine', 'ejs');

app.get('*', (req, res) => {
  // routes is our object of React routes defined above
  match({ routes, location: req.url }, (err, redirectLocation, props) => {
  if (err) { …

我创建了一个同构的 React 应用程序。一切正常，直到我试图在我的元素上放置一些动画。如果它是一个客户端渲染应用程序，我会通过编写动画函数并在 componentDidMount() 组件生命周期方法中调用该函数来实现。但不幸的是，这种方法不适用于 SSR。

在这种情况下如何调用我的动画函数？（已经尝试过 componentWillMount，它不起作用）