手机游戏nodejs 服务器端渲染用node.js 还是用go，fibjs之类等比较好

点击联系发帖人 时间：2016-12-02 06:36

nodejs 服务器端

客户端Javascript驱动的MVC如angular, ember, backbone等的问题是比较慢，用户体验差，同时对搜索引擎不友好，因此，J业界开始实现Javacript的服务器端渲染。前段时间Ember.js刚推出FastBoot，，并且这几天紧锣密鼓加紧推进中：。而同时ReactJS已经推出在Node.js + React 同构渲染的演示：这个案例是一个普通分页批量查询的案例，如下图：
点按图中的id或name等表格名，能够实现大小排序，页面下有分页符，通过查看Html源码，表格中数据是以普通html的table格式输出，但是点按分页的下一页，再查看html源码，还是第一页的内容，这就与普通使用Jsp或PHP/ASP等服务器端渲染区别所在，后者每切换一个页面实际是从服务器端再拉取一个新的页面内容，而新式的JS服务器端渲染技术是第一页如同JS/PHP/ASP，一旦输出渲染成功，页面各种效果包括切换到下一页都是由第一页的JS全面掌管，这时如同传统AngularJS等客户端Javascript驱动渲染页面一样，由AngularJS实时修改当前页面的DOM。这种服务器端和客户端同构Isomorphic JavaScript 技术的好处是：1.更好的用户体验，加载页面快2.搜索引擎友好，利于SEO3.易于维护4.自由逐步增强。这个代码演示下载后，运行node server.js后，浏览器浏览127.0.0.1:4444可以得到如上图效果。看看 server.js主要代码：/** @jsx React.DOM */var React = require('react/addons');/* create factory with griddle component */var Griddle = React.createFactory(require('griddle-react'));var fakeData = require('../data/fakeData.js').fakeDvar columnMeta = require('../data/columnMeta.js').columnMvar resultsPerPage = 100;var ReactApp = React.createClass({
componentDidMount: function () {
console.log(fakeData);
render: function () {
<div id="table-area">
<Griddle results={fakeData} columnMetadata={columnMeta} resultsPerPage={resultsPerPage} tableClassName="table"/>
</div>
});/* Module.exports instead of normal dom mounting */module.exports.ReactApp = ReactA/* Normal mounting happens inside of /main.js and is bundled with browerify */这段代码建立了一个ReactApp模块功能，其功能主要是输出表格内容，内容数据在fakeData.js中，表格表头标题数据在columnMeta.js中。当前端浏览器访问127.0.0.1:4444/时，请求发往端口路由/app/routes/coreRoutes.js：var React = require('react/addons');var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);module.exports = function(app) {
app.get('/', function(req, res){
// React.renderToString 将前面的模块组件ReactApp
//作为输入，输出产生markup
var reactHtml = React.renderToString(ReactApp({}));
// ReactApp输出内容输出到index.ejs的变量reactOutput处
res.render('index.ejs', {reactOutput: reactHtml});
});};这个路由的功能是直接将ReactApp输出内容输出到index.ejs的变量reactOutput处，index.ejs相当于我们以前的index.htm或index.jsp/index.php等：<!doctype html><html>
<head>
<title>React Isomorphic Server Side Rendering Example</title>
<link href='/styles.css' rel="stylesheet">
</head>
<body>
<h1 id="main-title">React Isomorphic Server Side Rendering Example</h1>

<div id="react-main-mount">
<%- reactOutput %>
</div>

</body></html>index.ejs中的
&%- reactOutput %&变量类似JSP中的&%=reactOutput %&，这个reactOutput 是模块组件ReactApp({})的输出。一旦index.ejs输出到浏览器，就形成了上图的效果，然后/main.js应该掌管了整个页面以后的流程，用户在页面上点按排序和分页都是main.js实现即时动态渲染，页面网址不再变化，类似传统的AngularJS效果。
就一句话: "第一次服务端渲染,后面客户端渲染"
是啊，这样的方式用了很多年了吧。不过用node做web服务器做中间层，好处是同一个模板，前后端渲染很方便，很多共用的代码
这个例子运行出错呃，错误如下，请问您知道这个怎么解决吗？Warning: Component(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't aReact component.Warning: Don't set the props property of the React element. Instead, specify the correct value when initially creating the element.TypeError: Can't add property context, object is not extensible
at ReactCompositeComponentMixin.mountComponent (D:\nodejs\node_global\node_modules\react\lib\ReactCompositeComponent.js:153:18)
at wrapper [as mountComponent] (D:\nodejs\node_global\node_modules\react\lib\ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (D:\nodejs\node_global\node_modules\react\lib\ReactReconciler.js:38:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\nodejs\node_global\node_modules\react\lib\ReactMultiChild.js:192:44)
at ReactDOMComponent.Mixin._createContentMarkup (D:\nodejs\node_global\node_modules\react\lib\ReactDOMComponent.js:289:32)
at ReactDOMComponent.Mixin.mountComponent (D:\nodejs\node_global\node_modules\react\lib\ReactDOMComponent.js:199:12)
at Object.ReactReconciler.mountComponent (D:\nodejs\node_global\node_modules\react\lib\ReactReconciler.js:38:35)
at ReactCompositeComponentMixin.mountComponent (D:\nodejs\node_global\node_modules\react\lib\ReactCompositeComponent.js:247:34)
at wrapper [as mountComponent] (D:\nodejs\node_global\node_modules\react\lib\ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (D:\nodejs\node_global\node_modules\react\lib\ReactReconciler.js:38:35)
最佳分辨率
OpenSource
Code & 2002-20}

淘宝游戏网