Tag: 服务器端渲染

反应和表示不允许jsx的应用程序: 我正在尝试学习如何使用快递制作networking应用程序，但是，我并不真正了解如何将数据发送到客户端，以及快递应该做什么。我有一个印象，表示应该发送数据到客户端，然后客户端应该根据发送的数据显示UI。现在我正在尝试使用reactDOMServer来显示一个反应组件，但是我遇到了一个jsx错误： res.send(ReactDOMServer.renderToString(<root />)) SyntaxError: Unexpected token < 我知道这篇文章，并试图安装babel的jsx，但它仍然给我这个错误。这是我的app.js： const express = require("express") const React = require("react") const ReactDOMServer = require("react-dom/server"); const root = require("./public/root.js"); const app = express(); app.get("/", (req, res) => { res.send(ReactDOMServer.renderToString(<root />)) }) app.listen(3000, () => { console.log("running on port 3000") }) root.js const React = require("react"); module.export = […]

与NodeJS相比，使用Rails进行服务器端渲染会有更好的整体服务器响应时间吗？: 我读过React.renderToString随着组件树数量和深度的增加而运行的时间越来越长，同步性阻止了节点服务器处理其他请求，因为它是单线程的，从而导致响应时间显着延长具有大量的并发请求。使用其他后端，如本质上是multithreading的Rails可以显着提高整体服务器响应时间吗？例如，Ruby有Execjs，允许它运行JavaScript。

React Express中的POST方法: 我需要做的是：点击buttonadd用户后，我想诱导POST方法到数据库MySQL。我必须从另一个文件连接到数据库比server.js，但我得到错误 Net.createConnection is not a function 这是我的Compontent文件 import React, { PropTypes} from 'react'; import { connect } from 'react-redux'; import { CounterActions } from '../redux/actions'; import { Link } from 'react-router' import mysql from 'mysql' var connection = mysql.createConnection({ host : 'xxx', user : 'xxx', password : 'xxx', database : 'xxx' }); connection.connect(function(error){ if(!!error){ […]

在React serverside组件中设置<script>的内容: 我有这个组件： export class Demo extends React.Component<DemoProps, any> { private foo: number; constructor(props: DemoProps) { super(props); } render() { return ( <html> <head> <script> // I would like to add an inline script here </script> </head> <body> <div id="root"> (hello world) </div> <div> <progress id="hot-reload-progress-bar" value="100" max="100"></progress> </div> </body> </html> ) } } 我如何在<script></script>标签内添加内联脚本？如果试试这个： getScript() […]

如何禁用或阻止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方法，有人可以告诉我，如果这是一个理想的方法？