javascript 客户端与服务器端模板(哪个?)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/29270384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Client-side vs. server-side templating (which one?)
提问by Karl Morrison
I've been reading some very interesting articles about the whole client vs. server rendering lately.
我最近一直在阅读一些关于整个客户端与服务器渲染的非常有趣的文章。
http://www.onebigfluke.com/2015/01/experimentally-verified-why-client-side.html
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://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/
http://tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/
Now I've been a bit of a fan boy when it comes to client side but after I read these articles some points started to show up in favor of the server side rendering, to my surprise... The main points were:
现在,当谈到客户端时,我一直是一个狂热的男孩,但在我阅读这些文章后,一些观点开始出现,有利于服务器端渲染,令我惊讶的是……主要观点是:
1) You can upgrade your server, but not your users device- This means, well, yes... youare in control of the server, so if it's under performing you may opt to upgrade/scale. You can't force users to upgrade their devices.
2) First paint vs. last paint- Now on the
experimentally verified...
link above it shows when the users first see the page (first paint) and when the users may use the page 100% (last paint). Now from what I can think of when the user sees the page, it takes their brain some time to process the signals from the visual cortex to the frontal cortex and then to the premoter cortex where the user actually starts clicking his/her finger, that is of course if the html is rendered first so the brain has something to process while loading is happening in the background (js files, binding etc.).
1)您可以升级您的服务器,但不能升级您的用户设备- 这意味着,嗯,是的...您可以控制服务器,因此如果它表现不佳,您可以选择升级/扩展。您不能强迫用户升级他们的设备。
2)第一次绘制与最后一次绘制- 现在在
experimentally verified...
上面的链接上,它显示用户第一次看到页面的时间(第一次绘制)以及用户何时可以 100% 使用页面(最后一次绘制)。现在从我能想到的当用户看到页面时,他们的大脑需要一些时间来处理从视觉皮层到额叶皮层,然后到用户实际开始点击他/她的手指的前皮层的信号,那当然,如果首先呈现 html,那么在后台加载(js 文件、绑定等)时大脑有一些事情要处理。
What really got me was the bit were twitter reported people of having up to 10 seconds of loading time for client side rendering, no one should ever experience that! It's kind of saying, "Well if you don't have a good enough device, sorry, you'll just have to wait.".
真正让我着迷的是 twitter 报告人们有长达 10 秒的客户端渲染加载时间,没有人应该经历过!这有点像说,“好吧,如果你没有足够好的设备,抱歉,你只需要等待。”。
I've been thinking, isn't there a good way of using bothclient-side and server-side templating engines and which both client and server use the same template engine and code. In that case it's only to figure out if it's benefactor to supply the client with the rendered page or let the client render it themselves.
我一直在想,有没有一种好的方法可以同时使用客户端和服务器端模板引擎,并且客户端和服务器都使用相同的模板引擎和代码。在这种情况下,它只是要弄清楚是向客户端提供呈现的页面还是让客户端自己呈现它是恩人。
In any case, share your thoughts on my sayings and the articles if you want. I'm all ears!
无论如何,如果您愿意,请分享您对我的言论和文章的看法。我全是耳朵!
采纳答案by Alexander Mikhalchenko
UPD: do it only if you reallyneed it
UPD:仅在您确实需要时才这样做
(4 years and 2 isomorphic enterprise apps later)
(4 年和 2 个同构的企业应用程序之后)
If you're requiredto do SSR, fine. If you can go with a simple SPA - go with it.
如果你需要做SSR,那很好。如果您可以使用简单的 SPA - 那就去吧。
Why so? SPAs are easierto develop, easierto debug and cheaperand easier to run.
为什么这样?SPA更易于开发、更易于调试且更便宜且更易于运行。
The development and debugging complications are evident. What do I mean by "cheaper and easier to run", though? Well, guess what, if 10K users try to open your app at the same time your static HTML website (i.e. a built SPA) you won't even feel it. If you're running an isomorphic webapp though, the TTFB will go up, RAM usage will go up and eventually you'll have to run a cluster of those.
开发和调试的复杂性是显而易见的。但是,“更便宜且更易于运行”是什么意思?好吧,你猜怎么着,如果有 10K 用户试图在你的静态 HTML 网站(即一个内置的 SPA)的同时打开你的应用程序,你甚至不会感觉到它。但是,如果您正在运行同构的 web 应用程序,那么 TTFB 将增加,RAM 使用量将增加,最终您将不得不运行这些集群。
So, unless you are required to show some super-low TTFB times (which will likely come through aggressive caching), don't overcomplicate your life.
因此,除非您需要显示一些超低的 TTFB 时间(这可能会通过主动缓存实现),否则不要让您的生活过于复杂。
Original answer from 2015:
2015 年的原始答案:
Basically you're looking for an isomorphic web appthat shares the same code for frontend and backend.
基本上,您正在寻找一个同构的 Web 应用程序,它为前端和后端共享相同的代码。
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.
同构 JavaScript
同时运行客户端和服务器端的 JavaScript 应用程序。同构 JavaScript 框架是 JavaScript 框架发展的下一步。这些新的库和框架正在解决与传统 JavaScript 框架相关的问题。
I bet this guy explains that much betterthat me.
So, when a user comes to the page, the server renders the full page with contents. So it loads faster and requires no extra ajax requests to load data, etc. Then, when a user navigates to another page, the usual techniques for single page applications are used.
因此,当用户访问该页面时,服务器会呈现包含内容的整个页面。所以它加载速度更快,不需要额外的ajax请求来加载数据等。然后,当用户导航到另一个页面时,使用单页应用程序的常用技术。
So, WHY WOULD I CARE?
那么,我为什么要关心?
- Old browsers / Weak devices / Disabled Javascript
- SEO
- Some page load improvements
- 旧浏览器/弱设备/禁用Javascript
- 搜索引擎优化
- 一些页面加载改进
Old browsers / Weak devices / Disabled Javascript
旧浏览器/弱设备/禁用Javascript
For example, IE9 does not support History API. So, for old browsers (and if user disables javascript too), they would just navigate through pages just like they did it it in good old days.
例如,IE9 不支持 History API。因此,对于旧浏览器(如果用户也禁用了 javascript),他们只会像过去那样浏览页面。
SEO
搜索引擎优化
Google says it supports SPA'sbut SPA's aren't likely to appear in the top results of google search, are they?
谷歌说它支持 SPA,但 SPA 不太可能出现在谷歌搜索的顶部结果中,是吗?
Page speed
页面速度
As it was stated, the first page loads with one HTTP request, and that's all.
如前所述,第一页加载了一个 HTTP 请求,仅此而已。
OK, so
好的,所以
There are lots of articles on that:
有很多关于这方面的文章:
- http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
- http://www.sitepoint.com/isomorphic-javascript-applications/
- https://www.lullabot.com/articles/what-is-an-isomorphic-application
- http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
- http://www.sitepoint.com/isomorphic-javascript-applications/
- https://www.lullabot.com/articles/what-is-an-isomorphic-application
But SHOULD I CARE?
但我应该关心吗?
It's up to you, of course.
当然,这取决于你。
Yeah, that's cool, but it takes much work to rewrite/adapt the existing app. And if your backend is in PHP/Ruby/Python/Java/Whatever, I've got bad news for you (it's not necessarily impossible, but close to that).
是的,这很酷,但是重写/调整现有应用程序需要做很多工作。如果你的后端是 PHP/Ruby/Python/Java/Whatever,我有一个坏消息要告诉你(这不一定是不可能的,但接近于那个)。
It depends on the website, you can try to collect some stats and if the percentage of users with old devices is small, it's not worth the trouble, so why not...
这取决于网站,您可以尝试收集一些统计信息,如果使用旧设备的用户百分比很小,那不值得麻烦,那么为什么不......
LET THEM SUFFER
让他们受苦
If you care only about users with old devices, then c'mon, it 2015, and it's your user's problem if he's using IE8 of browsing websites with a iPod Touch 2. For example, Angular dropped IE8 support in 1.3 approximately a year ago, so why wouldn't you just alert the users that they need to upgrade ;)
如果你只关心使用旧设备的用户,那么 2015 年,如果他使用 IE8 和 iPod Touch 2 浏览网站,那就是你的用户的问题。例如,大约一年前,Angular 在 1.3 中放弃了对 IE8 的支持,那么你为什么不只是提醒用户他们需要升级;)
Cheers!
干杯!
回答by Experienced Programmer
All of the conversations on this topic miss one point. Bytes sent to the client. Pages rendered as HTML on the server are a lot smaller. Less bytes transmitted is better for everyone, both server and client. I've seen the bandwidth costs on cloud sites and even a 10% reduction can be a huge saving. Client side JS pages are always fat.
关于这个话题的所有对话都遗漏了一点。发送给客户端的字节数。在服务器上呈现为 HTML 的页面要小得多。传输的字节越少越好,无论是服务器还是客户端。我已经看到云站点的带宽成本,即使减少 10% 也能节省大量成本。客户端 JS 页面总是很胖。