javascript - 客户端与服务器端模板(哪个?)

标签 javascript html server-side template-engine client-side-templating

最近我一直在阅读一些关于整个客户端与服务器渲染的非常有趣的文章。

http://www.onebigfluke.com/2015/01/experimentally-verified-why-client-side.html

http://www.quirksmode.org/blog/archives/2015/01/angular_and_tem.html

http://tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/

现在我有点喜欢客户端,但在阅读这些文章后,一些观点开始支持服务器端渲染,令我惊讶的是......要点是:

  • 1) 您可以升级您的服务器,但不能升级您的用户设备 - 这意味着,好吧,是的......可以控制服务器,所以如果它表现不佳,您可以选择升级/扩展。您不能强制用户升级他们的设备。

  • 2) First paint vs. last paint - 现在在上面的 experimentally verified... 链接上显示用户第一次看到页面的时间(第一次paint) 以及用户何时可以使用页面 100% (last paint)。现在,根据我的想法,当用户看到该页面时,他们的大脑需要一些时间来处理从视觉皮层到额叶皮层然后到用户实际开始点击他/她的手指的运动前皮层的信号,即当然,如果先呈现 html,那么在后台加载(js 文件、绑定(bind)等)时大脑需要处理一些事情。

真正让我着迷的是 Twitter 报道说人们有长达 10 秒的客户端渲染加载时间,没有人应该经历过这种情况!这有点像在说,“如果你没有足够好的设备,抱歉,你只能等待。”。

我一直在想,有没有一种很好的方法可以同时使用客户端和服务器端模板引擎,客户端和服务器都使用相同的模板引擎,代码。在那种情况下,只需弄清楚是向客户端提供呈现的页面还是让客户端自己呈现它是有益的。

无论如何,如果您愿意,请分享您对我的言论和文章的看法。我洗耳恭听!

最佳答案

UPD:只有当你真的需要时才做

(4 年和 2 个同构企业应用之后)

如果您被要求做 SSR,没问题。如果您可以选择简单的 SPA,那就选择它吧。

为什么会这样? SPA 更容易开发,更容易调试,更便宜并且更容易运行。

开发和调试的复杂性是显而易见的。不过,“更便宜、更容易运行”是什么意思?好吧,你猜怎么着,如果 10K 用户试图同时打开你的应用程序你的静态 HTML 网站(即内置的 SPA)你甚至感觉不到。但是,如果您运行的是同构 Web 应用程序,TTFB 会上升,RAM 使用率会上升,最终您将不得不运行这些应用程序的集群。

因此,除非您需要显示一些超低的 TTFB 时间(这很可能来自积极的缓存),否则不要让您的生活过于复杂。

2015 年的原始答案:

基本上你在寻找一个 isomorphic web app前端和后端共享相同的代码。

Isomorphic JavaScript

JavaScript applications which run both client-side and server-side. Isomorphic JavaScript frameworks are the next step in the evolution of JavaScript frameworks. These new libraries and frameworks are solving the problems associated with traditional JavaScript frameworks.

我打赌this guy explains that much better那个我。

enter image description here

因此,当用户访问该页面时,服务器会呈现包含内容的完整页面。因此它加载速度更快,不需要额外的 ajax 请求来加载数据等。然后,当用户导航到另一个页面时,将使用单页面应用程序的常用技术。

那么,我为什么要关心?

  • 旧浏览器/弱设备/禁用 Javascript
  • 搜索引擎优化
  • 一些页面加载改进

旧浏览器/弱设备/禁用 Javascript

例如IE9不支持History API。因此,对于旧浏览器(如果用户也禁用了 javascript),他们只会像过去的美好时光一样浏览页面。

搜索引擎优化

谷歌说 it supports SPA's但是 SPA 不太可能出现在谷歌搜索的顶部结果中,是吗?

页面速度

如前所述,第一个页面加载了一个 HTTP 请求,仅此而已。

好吧

关于这方面的文章有很多:

但我应该关心吗?

当然,这取决于你。

是的,这很酷,但是重写/改编现有应用程序需要做很多工作。如果您的后端使用 PHP/Ruby/Python/Java/任何语言,我有一个坏消息要告诉您(这不一定是不可能的,但接近于不可能)。

这取决于网站,您可以尝试收集一些统计信息,如果使用旧设备的用户比例很小,那么不值得,所以为什么不...

让他们受苦

如果您只关心使用旧设备的用户,那么拜托,现在是 2015 年,如果他使用 IE8 浏览网站和 iPod Touch 2,那是您的用户的问题。例如,Angular 在 1.3 中大约放弃了对 IE8 的支持一年前,所以你为什么不提醒用户他们需要升级 ;)

干杯!

关于javascript - 客户端与服务器端模板(哪个?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29270384/

相关文章:

jquery - ng-repeat 排序箭头在 javascript 数据表中不起作用

javascript - 将 Javascript 变量传递给 Google 脚本函数 (Google Sheets)

node.js - 从 node.js 作为一个完整的服务器端新手开始?

javascript - 如何从 mobx 对象中获取普通对象?

javascript - 网站使用热图

javascript - express : router object and methods

Html.TextAreaFor() 移除默认样式

ios - 使用 in_app 或 latest_receipt_info 获取自动更新的 iOS 7 样式交易的最新收据?

php - 运行没有输出到浏览器的php脚本

javascript - 在 react 中选择项目时,不会调用下拉 onclick