Question

我想知道的是，您如何构建您的Web应用程序？我真的很困惑，我应该将哪种方法用于我的项目。

已经决定选择哪种技术。

1）Node.js并表达为其框架

2）MongoDB

3）React + Flux

但问题是，我现在应该使用方法（A）或方法（B）

方法（A） - HTML的服务器端呈现

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所需的数据，以便它可以操作数据。

我担心的是，我应该使用哪种方法？大多数初创公司都使用哪种方法？

谢谢。

Answer 1

它不是一个/或一个命题。

React是一个客户端框架。您必须在客户端进行渲染。问题是是否在服务器端渲染以及以在客户端进行渲染。

答案是什么？如果可以，是的！

通过在服务器端渲染，您将获得SEO优势和初始性能提升。但是你仍然需要做同样的客户端渲染。

我建议使用谷歌搜索＆＃34;同构反应＆＃34;并做一些阅读。这是一篇关于这个主题的文章。 http://www.smashingmagazine.com/2015/04/react-to-the-future-with-isomorphic-apps/

Answer 2

嗯，这实际上取决于您对现代网络的看法，以及您愿意做的事情。

您是希望让用户等待，在数据异步加载时显示加载程序，还是您希望尽可能让用户保持忙碌？

以下是一些不同的文章，可以帮助您清醒，并了解通过执行服务器端呈现，客户端呈现有多个问题可以获得的不同优势。

你可以在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/

现在，关于你应该做什么，根据你的确需要做什么，我认为，但基本上，你可以同时做两件事（客户端和服务器端），获得最佳用户体验。

这个概念被称为＆＃34;同构javascript＆＃34;而且这些日子越来越受欢迎了。

Answer 3

最简单的架构是在服务器上进行动态html渲染，没有Ajax，并且几乎任何客户端点击都需要新的HTML页面。这是传统的＆＃39;方法，并有利有弊。

下一个最简单的方法是向客户端提供完全静态的html + js + css（您的React应用程序），并对Web服务进行XMLHttpRequest调用以获取所需的数据（即您的方法B）。

最复杂但最理想的方法（从绩效和搜索引擎优化的角度来看）是建立一个“同构”的方法。支持这两种方法的应用。这个想法是服务器进行客户端将进行的所有必要的WS调用，并呈现用户访问过的初始页面（可能是应用程序的深层链接部分），有点像选项A但使用React执行渲染，然后将控制权传递给客户端以供将来的DOM更新。然后，当用户进行交互时（例如，就像B），这允许通过web服务调用对页面进行快速增量更新。在不同的页面之间导航＆＃39;此时涉及使用历史记录API使其看起来像您正在更改页面，而实际上您只是使用Web服务操作当前页面。但是，然后您进行了浏览器刷新，您的服务器将在将控制权再次传递给客户端React之前发回当前页面的完整HTML。在线提供了大量的React + Flux + Node示例，使用支持服务器端渲染的不同风格的Flux。

这种方法是否值得，取决于你的情况。开始使用方法B（您可以在移动应用程序和网站之间共享您的HTTP API）可能是有意义的，但使用支持服务器端呈现的Flux架构并牢记其中。这样，如果您需要提高初始页面加载的性能，您就有办法实现它。

哪种方法更快，更快：服务器端呈现与客户端呈现

3 个答案: