哪种方法更快,表示为:服务器端渲染与客户端渲染

我想知道的是,你如何构build你的Web应用程序? 我真的很困惑,应该为我的项目使用哪种方法。

已经决定select哪些技术。

1)Node.js并表示为其框架

2)MongoDB

3)反应+通量

但是现在的问题,我应该使用方法(A)还是方法(B)

方法(A) – 用于HTML的Serverside呈现

app.get('/users/', function(request, respond) { var user = "Jack"; respond.render("user", { user: user }); }); 

方法(B) – HTML的客户端呈现

  app.get('/users/', function(request, respond){ var user = "Jack"; respond.json({ user: user }); }); 

方法A将从服务器和数据呈现HTML。

方法B只是响应客户端需要的数据React.js,以便它可以操纵数据。

我关心的是,我应该使用哪种方法? 大多数初创公司使用哪种方法?

谢谢。

这不是一个或者是一个命题。

React是一个客户端框架。 你必须在客户端渲染。 问题是除了在客户端渲染 ,是否在服务器端渲染。

答案? 如果可以的话,是的!

您将获得search引擎优化的好处,并通过在服务器端渲染提高性能。 但是你仍然需要做同样的客户端渲染。

我build议谷歌search“同构反应”,并做一些阅读。 这里是关于这个问题的一篇文章。 http://www.smashingmagazine.com/2015/04/react-to-the-future-with-isomorphic-apps/

那么,这取决于你在现代networking上有哪些愿景,以及你愿意做什么。

您希望让用户等待,在数据asynchronous加载时显示加载器,还是希望让用户尽可能长时间忙?

这里有不同的文章,将帮助你清除你的思想,并意识到你可以通过做服务器端渲染,客户端呈现有多个问题的不同优势。

你可以从Twitter博客上看到这篇文章,他们通过将渲染移动到服务器,将他们的初始页面负载提高了1/5,达到了之前的水平。

https://blog.twitter.com/2012/improving-performance-on-twittercom

另一篇文章,这次来自airbnb,描述了客户端渲染本身的问题:

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

还有一篇关于客户端/服务器端渲染的有趣文章,引发了关于何时使用/不使用服务器端或客户端渲染的争论,以及为什么:

https://ponyfoo.com/articles/stop-breaking-the-web

完成后,我可以给你两个更多的关于反应的链接,并描述服务器端的渲染应该对你的情况有帮助:

https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

http://reactjsnews.com/isomorphic-javascript-with-react-node/

现在,关于你应该做什么,根据我的观点,这是一个你确实需要做的事情,但基本上,你可以同时做两个(客户端和服务器端),以获得最佳的用户体验。

这个概念被称为“同构javascript”,现在越来越受欢迎。

最简单的架构就是在服务器上进行dynamic的html渲染,没有Ajax,并且有一个新的HTML页面,用于几乎任何客户端点击。 这是“传统”的做法,有利有弊。

接下来最简单的是向客户端提供完全静态的html + js + css(你的React应用程序),并且调用XMLHttpRequest调用Web服务来获取所需的数据(即方法B)。

最复杂但理想的方法(从性能和SEO的angular度来看)是build立一个“同构”的应用程序,支持这两种方法。 这个想法是,服务器完成客户端所需的所有WS调用,并呈现用户访问的初始页面(可能是应用程序的深层链接部分),有点像选项A,但是使用React进行渲染,然后将控制权交给客户端,以便将来的DOM更新。 然后这允许在用户交互时通过web服务调用对页面进行快速增量更新(例如,就像B)。 在这一点上,不同“页面”之间的导航涉及到使用历史API来使它看起来像你正在改变页面,实际上你只是使用web服务操纵当前页面。 但是,您然后做了一次浏览器刷新,您的服务器将再次将控制传递给客户端React之前,将发送当前页面的完整HTML。 这种方法有很多React + Flux + Node实例可以在线获得,使用不同的Fluxtypes来支持服务器端的渲染。

这种方法是否值得,取决于你的情况。 开始使用方法B(您可以在移动应用程序和网站之间共享您的HTTP API)可能是有意义的,但是使用支持服务器端呈现的Flux体系结构并记住它。 这样,如果您需要提高初始页面加载的性能,您就有办法做到这一点。