哪种方法更快，表示：服务器端渲染与客户端渲染

Posted 2023-03-07

【中文标题】哪种方法更快，表示：服务器端渲染与客户端渲染

【英文标题】：Which method is faster, express : Server-side rendering vs client-side rendering

【发布时间】：2016-01-26 08:44:38

【问题描述】：

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

已经决定选择哪些技术。

1) Node.js 及其框架表达

2) MongoDB

3) 反应 + 通量

但是现在的问题，我应该使用方法(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 客户端所需的数据，以便它可以操作数据。

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

谢谢。

【问题讨论】：

如果你打算使用 React 构建一个应用程序，你应该遵循 Flux 模式。

糟糕，标题上没有看到 Express。对 Express 不太熟悉，所以可能会有所不同。

一般来说，最好在客户端渲染更多，在自己的服务器上做更少的事情。但是在客户端只能渲染这么多，如果不指定启动类型，就很难回答你关于大多数初创公司做什么的问题。

如果你做客户端渲染，你需要为搜索引擎的服务器端渲染（相同内容）做一个并行路径。

客户端渲染更具可扩展性（因为它使用客户端 CPU 进行一些工作，并且可能会进行更有效的模板缓存），并且可能比慢速链接更快（下载更少）。如果服务器速度快、负载轻且链接速度快，则服务器端渲染可能会竞争速度。

【参考方案1】：

这不是一个非此即彼的命题。

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

答案？如果可以的话，是的！

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

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

【讨论】：

注意：关于服务器端渲染的“Isomorphic React” React 现在被称为“Universal React”

【参考方案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/

现在，关于你应该做什么，在我看来，这是你真正需要做什么的问题，但基本上，你可以同时做这两个（客户端和服务器端），拥有最佳用户体验。

这个概念被称为“同构 javascript”，现在越来越流行。

【讨论】：

对您提出的案例的可能反驳：Leaving JSPs in the dust: moving LinkedIn to dust.js client-side templates。您的性能还可能取决于您实现客户端模板的具体方式。

是的，我想是的，根据您实际实现客户端渲染或“同构”应用程序的许多不同方式来判断。

我阅读了您分享的大部分链接，这确实让我对两者都大开眼界，但是，由于服务器端渲染速度很快，如果我想去，我是否需要复制我的 API 代码手机？

我不确定你的问题；您是在谈论移动混合应用程序吗？还是原生 ios/android 应用？

【参考方案3】：

最简单的架构是只在服务器上进行动态 html 呈现，没有 Ajax，并且几乎所有客户端点击都需要一个新的 HTML 页面。这是“传统”方法，有利也有弊。

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

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

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