Articles of 服务器端渲染

如何禁用或阻止ReactJS在服务器端呈现时查找文档?

我正在尝试在我的ReactJS应用程序中使用客户端上的animation。 如果我通过npm安装gsap模块,然后尝试在我的模块中使用gsap,我得到以下错误: node_modules/gsap/src/uncompressed/TweenMax.js:2535 _doc = document, ^ ReferenceError: document is not defined at Function.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2535:11) at [object Object].check (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5794:61) at new Definition (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5811:10) at window._gsDefine (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5816:12) at Array.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2489:11) at /Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7570:9 at Object.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7581:3) at Module._compile (module.js:435:26) at Module._extensions..js (module.js:442:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/babel-register/lib/node.js:138:7) 有没有在ReactJS代码的方法:如果它在服务器上呈现,没有文档,所以不加载gsap,但一旦编译bundle.js(我的客户端反应接pipe客户端的js)下载,使用gsap因为文件存在? 目前我正在使用的工作是将gsapembedded到index.ejs中: <!DOCTYPE html> <html> <head> <title>Solid Website</title> </head> […]

在NodeJS中执行webpack编译的包

我想为我的ReactJS应用程序实现服务器端渲染。 我使用react-router 。 我把routes.js作为webpack入口点,并使用output.libraryTarget = "commonjs2"选项进行编译。 然后我需要在NodeJS脚本中编译的结果进行渲染。 但是我有错误。 Webpack在以下代码中打包模块: /* 277 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(Buffer, global) { if (global.foo) { /* … */ } /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(277).Buffer, (function() { return this; }()))) /***/ } 当NodeJS尝试执行(function() { return this; }())它的返回值undefined 。 在浏览器中将返回window 。 为什么webpack使用这样的包装代码? 如何使这个代码在NodeJS中工作? 我使用节点克隆作为外部库。 […]

如何将服务器端渲染中的数据传递给节点的reactjs组件

我刚刚开始学习reactJS的function,我很新。 我试图找出一种方法,通过服务器端渲染概念从nodeJS传递的价值JS。 在下面的例子中,我能够定义一个反应组件,并将其添加到服务器,并在UI中呈现它,但我不知道如何将数据传递给可以在组件渲染函数内使用的组件。 client.js var React=require('react'); var ReactDOM=require('react-dom'); var Component=require('./Component.jsx'); ReactDOM.render( React.createElement(Component),document ); Component.jsx var React=require('react'), Request=require('superagent') module.exports = React.createClass({ getInitialState: function () { return { }; }, componentWillMount: function () { }, componentDidMount: function() { clearInterval(this.intervalID) }, _handleClick: function () { alert('You clicked!') }, render:function(){ return( <html> <head> <title> ReactJS – demo </title> <link […]

快递静态CSS没有服务

我一直试图弄清楚这几个小时,我的头即将爆炸。 我真的希望这不是我错过的一些愚蠢的小细节… 我有一个服务器端渲染反应应用程序设置。 一切都很好。 我唯一的问题是,我似乎无法得到加载的CSS。 这是我的文件树(没有node_modules): https ://i.stack.imgur.com/xevUb.png' 我有我的server.js文件中的以下代码 app.use('static', express.static(__dirname + '/public')); app.use('dist', express.static(__dirname + '/dist')); app.get('*', (req, res) => { 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) { var html = renderToString( < […]

如何在服务器端渲染的React应用程序中构造多个HTTP请求?

我目前正在使用下面的服务器端渲染逻辑(使用reactjs + nodejs + redux)第一次同步获取数据,并将其设置为存储中的初始状态。 fetchInitialData.js export function fetchInitialData(q,callback){ const url='http://….' axios.get(url) .then((response)=>{ callback((response.data)); }).catch((error)=> { console.log(error) }) } 我asynchronous获取数据,并加载输出存储在第一次使用callback加载页面。 handleRender(req, res){ fetchInitialData(q,apiResult => { const data=apiResult; const results ={data,fetched:true,fetching:false,queryValue:q} const store = configureStore(results, reduxRouterMiddleware); …. const html = renderToString(component); res.status(200); res.send(html); }) } 我有一个要求在初始页面加载4到5个API调用,因此想要检查是否有一个简单的方法来实现在页面加载多个调用。 我是否需要链接api调用并手动合并来自不同API调用的响应并将其发回以加载初始状态? 更新1:我想使用axios.all方法,有人可以告诉我,如果这是一个理想的方法?

airbnb的hypernova工具可以用于angularjs web seo

noAirbnb有一个工具hypernova的JavaScript视图的服务器端呈现。 我想知道它是否可以用来增强sej基于Ajax的网站,如工具prerender用于。 如果不是那么为什么?