我正在使用react、Redux和react Router开发一个react web应用程序,带有服务器端呈现(使用express)
我面临的问题有点难以解释。我将试着在下面的步骤中进行解释。
>
您首先从http://www.example.com/articles/1234这样的URL进入应用程序。express服务器将发送正确的内容,其中包括正确的页面源和DOM(来自chrome Element面板)作为初始负载。
然后让我们导航到一个不同的页面,比如http://www.example.com/articles/5678(导航不会导致页面刷新,因为它是一个单页面应用程序,它只会在使用浏览器刷新或从浏览器地址栏中的URL输入页面时才会向服务器提供SSR内容)。
在浏览器中用cmd+r或f5刷新页面(您现在位于http://www.example.com/articles/5678页面)。同样,服务器将向下发送内容。但这次你收到的内容有点不同。浏览器中的页面内容是正确的,以及来自chrome Elements面板的DOM。但是,页面源是不正确的,它仍然是您从第1步得到的旧页面源。
我已经尝试在刷新页面时注销内容。服务器在步骤3中发送的内容不是正确的内容(它是上一页),但浏览器仍然可以看到正确的内容。
如果我在步骤3之后再次刷新页面,那么我将得到正确的内容和正确的页面源...
我也在使用Facebook open graph Debugger。调试器告诉我它遵循重定向到步骤3。而它所跟随的重定向URL是上一页URL。我知道这不太对,但不知道我做错了什么地方...
以下是我的expresshtml" target="_blank">服务器设置
谢谢你的帮助!
server.js
require('babel-register');
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const ReactRouter = require('react-router');
const ReactRedux = require('react-redux');
const Store = require('./src/store/configureStore').default;
const routes = require('./src/routes').default;
const compression = require('compression');
const morgan = require('morgan');
const store = Store();
const match = ReactRouter.match;
const RouterContext = ReactRouter.RouterContext;
const Provider = ReactRedux.Provider;
const port = process.env.PORT || 5050;
const ReactHelmet = require('react-helmet');
const Helmet = ReactHelmet.Helmet;
const app = express();
app.use('/dist', express.static('./dist'));
app.set('view engine', 'ejs');
app.use(compression());
app.use(morgan('combined'));
app.use((req, res) => {
// prettier-ignore
match(
{ routes, location: req.url },
(error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message);
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if (renderProps) {
console.log(renderProps);
const body = ReactDOMServer.renderToString(
React.createElement(
Provider,
{ store },
React.createElement(RouterContext, renderProps)
)
);
const meta = Helmet.renderStatic().meta.toString();
res.status(200).render('index', {body, meta});
} else {
res.status(404).send('Not found');
}
}
);
});
console.log('listening on port ' + port); // eslint-disable-line
app.listen(port);
我最终解决了这个问题。
主要问题是,我将异步数据提取调用放在componentwillmount
生命周期方法中,而不是componentdidmount
。
而且我没有正确处理应用程序中的异步数据提取。
我现在使用本文中提到的方法来处理异步数据获取问题。
基本上,我在做以下几件事:
>
在客户端:在组件中创建静态方法fetchdata
。
在服务器端:使用React Router获取正确的组件,并使用fetchdata
方法获取该组件所需的数据。
在解决了这些承诺之后,从Redux store获取当前状态,并呈现HTML并将其发送到客户端。
将状态注入客户端Redux存储并呈现页面。
到目前为止,当在开发和生产模式下启动服务器时,所有工作都在本地进行。一旦我们部署到CCV2云中,我们就不再有服务器端呈现了。 在Kibana日志中,我们有时会看到错误消息“SSR呈现超出超时,回退到CSR”,但只是偶尔出现在一些请求中,这意味着对于大多数请求来说,没有SSR,也没有错误日志。 你知道吗?
在我的react js应用程序中,我想实现服务器端渲染。因此,我遵循了这个repo。 现在我遇到了这个错误。 不变冲突:浏览器历史记录需要DOM 我以为这是错误。但是我已经导入了router并使用了函数。但我也犯了同样的错误。 app.js(客户端根文件) js(路由文件) js(服务器端文件) 我不知道实际的问题是什么。我搜索了很多google.checked这个qsalso.but没有结果。我
我一直在做一个项目。在项目的一部分中,我需要使用JPanel。Graphics2D对象被传递给框架的模型部分,模型将在该实例中绘制它需要的任何内容。问题是JFrame未正确呈现。它看起来是半白色的阴影和不正确的绘画。它在我的笔记本电脑(索尼Vaio和Windows7)上运行良好,但在我测试的所有其他系统(2台戴尔笔记本电脑、windows8;1台Thoshiba和Windows7;1台三星和win
问题内容: 我正在使用 JSF 2.1.8 实现Web应用程序,而 ui:include 标记存在问题。我有这个代码 该 navigationManagerSystem bean是JSF会话管理,在这一段代码首先呈现的,它应该是显示包括路径内容。如果我以这样的常量执行此操作,则包括这些工作,但是如果我将其放入变量中则不行,即使我已经看到变量在屏幕打印之前就保持了该值。我不知道它是否可以与包含/sy
我一直试图创建一个TopoJson文件,其中包含美国各州、县和国会选区等层的合并层数据。 起初的shp形状文件来自人口普查局的地图边界文件。 它们通过ogr2ogr转换为GeoJson。 然后通过节点服务器端库合并成TopoJson格式,量化为1e7,保留比例为0.15。到目前为止,没有任何迹象表明存在任何问题。 可在此处找到该页面的工作版本:http://jsl6906.net/D3/topoj