我认为隐含的是,在实现同构单页面应用程序时,您还开发了一个私有API,您的客户端将会更新.
我的问题是,当您将代码更改推送到服务器时,会有"陈旧"的客户端仍在运行您的旧客户端代码,然后使用可能不兼容的参数和假设命中您的API.
我看到两种可能的解决方案
(如果您还有移动应用客户端支持,Api版本控制是必需的,但对于一个网站来说,似乎是很多不必要的工作.)
其他人遇到或解决这个问题？我还缺少其他选择吗？
使用React Starter Kit,我按如下方式添加Material UI:
npm install material-ui --save
以及导入到组件的以下内容:
import RaisedButton from 'material-ui/lib/raised-button';
和:
<RaisedButton label="Default" />
我收到以下错误:
警告:Material-UI:应在muiTheme上下文中提供userAgent以进行服务器端呈现.
根据Material UI的文档,它说我需要解决三件事:
我应该输入什么代码以及确切的位置,特别是React Starter Kit？
PS 此解决方案对我不起作用: - /
我最近使用React-Redux-Express-Mongoose堆栈构建了一些isomporphic/univeral项目.
在我的猫鼬模型中包含了很多业务逻辑.作为一个非常基本的例子(借口我的ES6):
import mongoose, {Schema} from 'mongoose';
const UserSchema = new Schema({
name: String,
password: String,
role: String
});
UserSchema.methods.canDoSomeBusinessLogic = function(){
return this.name === 'Jeff';
};
UserSchema.methods.isAdmin = function(){
return this.role === 'admin';
};
这在服务器上都很棒,但是当这些模型在浏览器中作为普通JSON对象进行水合时,我必须在一些React组件或Redux reducer中重新实现相同的业务逻辑,这对我来说感觉不是很干净.我想知道如何最好地解决这个问题.
阅读Mongoose,浏览器支持似乎有限,主要用于文档验证.我想我的主要选择是:
将所有业务逻辑移动到一些"普通"JS类中,并在整个地方实例化这些逻辑.例如:
# JS Class definition - classes/user.js
export default class User {
constructor(data = {}){
Object.assign(this,data);
}
canDoSomeBusinessLogic(){
return this.name === 'Jeff';
};
isAdmin(){
return this.role === 'admin';
}
}
# Server - api/controllers/user.js
import UserClass from
User.findById(1,function(err,user){
let user = new …我开始创建一个基于Node的同构React/Redux应用程序.该项目的一个要求是基于"移动"和"桌面"视图的"适应性"呈现特定组件.我已经实现了Redux动作和reducer来存储有关用户视图的屏幕信息(基于媒体查询 - "小","中","大").在调整大小时,状态/商店会更新.默认状态为"小".
const defaultState = {
isMobile: true,
isTablet: false,
isDesktop: false,
sizes: {
small: true,
medium: false,
large: false,
huge: false,
},
};
在需要根据屏幕大小在两个不同版本中呈现"自适应"的组件中,我只需执行以下操作:
如果(小)返回变化1
如果(中)返回变异2
一切正常.
现在我面临两个问题:
我的应用程序是同构的,这意味着标记也呈现服务器端.服务器对用户的浏览器和媒体查询一无所知.因为我的默认状态是"小",服务器将始终呈现"variation1".节点服务器是站点的入口点.看起来渲染需要"延迟"(中间件？),服务器需要在React应用程序"交付"之前从客户端获取有关浏览器宽度的一些信息.知道如何解决这个问题吗？
因为渲染是基于状态的,所以在加载"变化1"之后总是可以看到几毫秒(闪烁),即使浏览器大小是"桌面".这是因为在使用当前屏幕宽度更新状态之前,JS检测需要几毫秒.我认为这与上述问题和默认状态一起发挥作用.
我找不到1的任何解决方案,但我想必须有一些同构和响应/自适应的东西.
serverside-javascript node.js reactjs isomorphic-javascript server-side-rendering
当我检查服务器上的反应呈现的标记时,我看到很多评论,如:
<!-- /react-text --><!-- react-text: 28 --><!-- /react-text -->
如何让反应停止渲染？
您能否向我们推荐使用nextjs在生产中部署应用程序的最佳实践？
我们正在考虑以下策略:金丝雀部署,蓝/绿部署......我们有几个疑问来处理BUILD_ID.
现在,通过这种策略,我们面临着这样的错误:
INVALID_BUILD_ID,因为在部署的某个时刻,我们至少有两个不同版本的应用程序.
例如:
在Canary部署中,我们有两个不同的版本,Balancer将客户端发送到版本A,但是当客户端需要其他资源时,平衡器可以将此请求发送到版本B的服务器.此时客户端当应用程序获取serp.js,_error.js,_document.js等资源并且未正确加载网页时,会收到500错误.
_next/f6bff019-9550-4029-99fa-2b33a50045f6/page/index.js ---> old (previous deployment)
_next/005b2202-c5b2-4de6-afd8-1c8451d16ab3/page/index.js ---> new (current deployment)
到目前为止,我们测试过:
将BUILD_ID重命名为在两个版本中都具有相同的哈希值,但我们认为这是一种不好的做法,因为我们认为客户端的缓存不会刷新预期的方式.
粘性会话是最可靠的,但我们处理一个无状态应用程序作为一个状态的应用程序,实际上是不正确的.
我们可以在前面放置一个缓存BUILD_ID的CDN,但是我们不确定我们应该为js文件的缓存分配时间.
嗨，我是 Meteor 的新手，我想知道在 Meteor.user 对象中生成的 hashedToken 的用途是什么。
在 Meteor 文档中，解释了服务对象，
包含特定登录服务使用的数据。例如，它的重置字段包含用于忘记密码链接的令牌，其简历字段包含用于在会话之间保持登录的令牌。
当我检查 localstorage 时，Meteor.loginToken 似乎与 hashedToken 不同。
所以我的问题是，1.本地存储中生成的 Meteor.loginToken 和服务对象内部生成的 hashedToken 有什么区别？2.还有为什么resume.loginTokens里面的service对象是一个数组？
任何帮助表示赞赏...
reactive-programming meteor meteorite meteor-accounts isomorphic-javascript
我正在构建一个同构的应用程序.它是完全建立的反应 - 即,HTML基地也在反应.
我有我的根html作为应用程序组件.
它看起来像这样:
...
var AppTemplate = React.createClass({
displayName: 'AppTemplate',
render: function() {
return (
<html>
<head lang="en">
<title>hello</title>
<link rel="stylesheet" href='/css/style.css' />
</head>
<body>
<RouteHandler {...this.props}/>
<script type='text/javascript' src='/js/bundle.js' />
</body>
</html>
);
}
});
...
module.exports = AppTemplate;
当我使用webpack构建项目时,我需要替换js/bundle.js以包含哈希.
Webpack在完成后提供stats.json.但是我需要在构建期间使用哈希值.
我正在考虑使用功能标志来执行以下操作:
...
var AppTemplate = React.createClass({
displayName: 'AppTemplate',
render: function() {
return (
<html>
<head lang="en">
<title>hello</title>
<link rel="stylesheet" href='/css/style.css' />
</head>
<body>
<RouteHandler {...this.props}/>
<script type='text/javascript' src='/js/bundle.{__HASH__}.js' />
</body>
</html>
);
}
});
...
module.exports …我在服务器上使用 react-router 2.0。我的一些顶级路由组件依赖于要获取的异步数据并使用 Redux 来管理状态。为了解决这个问题，我使用了一个静态fetchData()方法来返回 aPromise.all的 async 操作，如官方 Redux 文档中所建议的。它工作得很好——来自服务器的初始渲染带有 Redux 存储中的适当数据。
我的问题来自如何编写这些异步调用，这种方式既适用于服务器上的初始渲染，又适用于客户端上的后续渲染，因为加载了不同的路由。目前，我fetchData()在顶级组件的 中调用静态方法componentDidMount()，但是fetchData()一旦组件安装在客户端上，这将导致调用 。这是从另一个导航到路线时我想要的，但不是在初始渲染时，因为我们已经在服务器上进行了此调用。
我一直在努力以一种方式编写我的数据获取逻辑：
我想{ serverRendered: true }在初始组件中注入一个类似的道具，但我只能<RouterContext>在调用renderToString(). 我查看了源代码，但似乎我也无法从该 JSX 标记传递该属性。
我想我的问题是：
<RouterContext>以便它向下传递到“父”顶级路由组件？如果不是 in <RouterContext>，是否有另一种方法可以将属性注入？fetchData()以便初始渲染不会导致fetchData()在服务器和客户端上都被调用？javascript serverside-javascript reactjs react-router isomorphic-javascript
我收到错误 @types/isomorphic-fetch 没有默认的导出获取
import fetch from 'isomorphic-fetch';
export const AUTH_FAIL = "AUTH_FAIL"
export const ERROR_FETCH = "EROR_FETCH";
export const SUCCESS_FETCH = "SUCESS_FETCH";
export const START_FETCH = "START_FETCH";
export function start_fetch(){
return function(dispatch: any){
return fetch("http://localhost:8000/api/data")
.then(
response => response.json()
)
}
}
感谢您的帮助。
reactjs ×6
javascript ×3
node.js ×3
caching ×1
deployment ×1
material-ui ×1
meteor ×1
meteorite ×1
mongoose ×1
next.js ×1
react-router ×1
redux ×1
universal ×1
webpack ×1