前端渲染和后端渲染的区别糖~豆豆

第一个是后端渲染,第二个和第三个是前端渲染。

nuxt是后端渲染,通俗来说:优点:首屏加载快seo友好,坏处是更吃服务器资源,并发会受到影响。举例来说:原本并发3000后端渲染估计会降到200。

以上是个人通俗解释,下面是从网上找来的解释,希望大家可以了解更清晰。

后端渲染HTML的情况下,浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串,这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的,在这种情况下,浏览器只进行了HTML的解析,以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。

前端渲染就是指浏览器会从后端得到一些信息,这些信息或许是适用于题主所说的angularjs的模板文件,亦或是JSON等各种数据交换格式所包装的数据,甚至是直接的合法的HTML字符串。这些形式都不重要,重要的是,将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的,在形成了HTML字符串之后,再进行显示。

题主所提到的几个技术,我认为模板这个词语并不能用来区分这些技术的本质,模板只是一种提供给程序来解析的一种语法,换句话说,模板是用于从数据(变量)到实际的视觉表现(HTML代码)这项工作的一种实现手段,而这种手段不论在前端还是后端都有应用。

以下为本人自己的想法:在性能上,我认为后端渲染最终会被前端渲染,因为后端渲染将所有的HTML生成集中在了一个服务器上,而前端渲染将这部分工作分发到各个终端上。另外,对于开发而言,这样能够避免后端开发人员过多的编写HTML代码,后端开发人员只需和前端开发事先商定好数据格式,后端就只需将数据生成,用数据交换格式包装,再发送出去就可以了,这样能够使开发人员之间的分工更加明确。

很重要,所以要普及。

SEO:搜索引擎优化(SearchEngineOptimization),它是指通过站内优化,如:网站结构调整、网站内容建设、网站代码优化以及站外优化等方法,来进行搜索引擎优化。

简单说:通过各种技术(手段)来确保,你的Web内容被搜素引擎最大化收录,最大化提高权重,带来更多流量。

常见关键词:白帽、黑帽、SEM、Backlink、Linkbait、PageRank、KeywordStuffing...,总之都围绕着一个核心:SEO;流量是变现的快车道,SEO是低成本获取流量的最佳方法。

SPA:单页Web应用(singlepagewebapplication,SPA),就是只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

简单说:Web不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统...组成的应用程序,其中路由系统是非必须的。

大部分的Vue项目,本质是SPA应用,Angular.js、Angular、Vue、React...还有最早的"Pjax"均如此。

SPA时代,主要是在Web端使用了history或hash(主要是为了低版本浏览器的兼容)API,在首次请求经服务端路由输出整个应用程序后,接下来的路由都由前端掌控了,前端通过路由作为中心枢纽控制一系列页面(组件)的渲染加载和数据交互。

而上面所述的各类框架则是将以:路由、数据、视图为基本结构进行的规范化的封装。

最早的SPA应用,由Gmail、GoogleDocs、Twitter等大厂产品实践布道,广泛用于对SEO要求不高的场景中。

SSR:服务端渲染(ServerSideRender),即:网页是通过服务端渲染生成后输出给客户端。

在SPA之前的时代,我们的Web架构大都是SSR,如:Wordpress(PHP)、JSP技术、JavaWeb...或者DEDECMS、Discuz!等这些程序都是传统典型的SSR架构,即:服务端取出数据和模板组合生成html输出给前端,前端发生请求时,重新向服务端请求html资源,路由也由服务端来控制。

其次,有个概念叫预渲染(Prerendering)。

如果你只是用服务端渲染来改善一个少数的营销页面(如首页,关于,联系等等)的SEO,那你可以用预渲染来实现。预渲染不像服务器渲染那样即时编译HTML,它只在构建时为了特定的路由生成特定的几个静态页面,等于我们可以通过webpack插件将一些特定页面组件build时就编译为html文件,直接以静态资源的形式输出给搜索引擎。

但实际的商业应用中,大部分时候我们需要的是即时渲染,这也是我们今天讨论的主题。

为什么要SSR,为了体验,还有SEO。

首先,用户可能在网络比较慢的情况下从远处访问网站-或者通过比较差的带宽。这些情况下,尽量减少页面请求数量,来保证用户尽快看到基本的内容。可以用Webpack的代码拆分避免强制用户下载整个单页面应用,但是,这样也远没有下载个单独的预先渲染过的HTML文件性能高。

对于世界上的一些地区人,可能只能用1998年产的电脑访问互联网的方式使用计算机。而Vue只能运行在IE9以上的浏览器,你可能也想为那些老式浏览器提供基础内容-或者是在命令行中使用Lynx的时髦的黑客。

在大部分的商业应用中,我们有SEO的需求,我们需要搜索引擎更多地抓取到我们的内容,更详细地认识到我们的网页结构,而不是仅对首页或特定静态页进行索引,这是SSR最重要的意义。

且,我们还需要在SSR的基础上实现SPA,即:首屏渲染。

基本流程是:

在浏览器第一次访问某个URI资源的时候(首屏),Web服务器根据路由拿到对应数据渲染并输出,且输出的数据中包含两部分:

在客户端首屏渲染完成之后,此时我们看到的其实已经是一个和之前的SPA相差无几的应用程序了,接下来我们进行的任何操作都只是客户端的应用进行交互,页面/组件由Web端渲染,路由也由浏览器控制,用户只需要和当前浏览器内的应用打交道就可以了。

另一方法是自行构建蜘蛛渲染逻辑,当识别UA为搜索引擎时,拿服务端已准备好的模板和数据进行渲染输出html数据,反之,则输出SPA应用代码;

我当时也考虑过此方法,但有很多弊端,如:

需要针对蜘蛛编写一套独立的渲染模板,因为大部分情况下SPA的代码是没法直接在服务端使用的搜索引擎若检测到蜘蛛抓取数据和真实访问数据不一致,会做降权惩罚,也就意味着渲染模板还必须和SPA预期输出一模一样所以,最好的方法是SPA能和服务端使用同一套模板,且使用同一个服务端逻辑分支,再简单说:最好Vue、Ng2...能直接在服务端跑起来。

于是,陆续诞生了基于React的Next.js、基于Vue的Nuxt.js、Ng2诞生之日便支持。

THE END
1.原来“纯种猫”和“串串猫”区别很大,你养了哪种?#猫咪原来“纯种猫”和“串串猫”区别很大,你养了哪种? #猫咪程瑞醒醒 广东 0 打开网易新闻 体验效果更佳“第一次是犯错,第二次是选择” WILL观影团 1562跟贴 打开APP 俄罗斯的武器弹药为什么打也打不完,越打越多,越打越精神? 佚柔姐姐 42跟贴 打开APP 1945年录像,马尼拉10多万平民遭日军屠杀,美军火烧逐街...https://m.163.com/v/video/VGG1HH63H.html
2.web前端开发与后端开发有什么区别?企业对于web前端开发工程师的需求量也越来越大,使得很多人也通过Web前端开发工程师培训课程成功的晋升为Web前端开发工程师,Web前端开发工程师作为一个专业技术岗位,需要掌握多种技术来构建现代化的网页和应用程序,今天八维职业学校和大家一起来看看web前端开发与后端开发有什么区别,希望对想要学习和了解web前端开发工程师...https://www.bwie.com/jsgh/231.html
1.宠物店员和网店客服专员有什么区别工资待遇区别 岗位名称 平均工资 较上年 宠物店员 ¥4.8K 持平 网店客服专员 ¥4.6K -1% 说明:宠物店员和网店客服专员哪个工资高?宠物店员高于网店客服专员。宠物店员平均工资¥4.8K/月,2024年工资¥4.9K,与2023年持平,网店客服专员平均工资¥4.6K/月,2024年工资¥4.7K,2024年工资低于2023年,统计依赖...https://www.jobui.com/gangwei/pk/chongwudianyuan-wangdiankefuzhuanyuan/
2.新春送礼佳勋选优质血统纯种喵了解一下它们的定价规则在新春之际,许多人都希望能够给亲朋好友带去一些温馨和喜悦的礼物。对于宠物爱好者来说,送一只优质血统的猫咪无疑是一个既实用又充满情感意义的选择。不过,在购买时,我们需要考虑到猫咪价格因素,这不仅涉及到经济成本,也关系到我们对这只猫咪未来生活环境和需求的考量。 https://www.tepnz.com/li-shi/542405.html
3.猫咪新宠在线热议,宠物爱好者的新宠猫咪技术服务猫咪在线,成为宠物爱好者的新宠,引发关注...http://www.jucaotang.net/post/9942.html
4.猫咪品种鉴赏揭秘它们如何辨别不同血统的特征生理特征 最后,由于遗传因素所导致的一些生理特征也是不可忽视的,比如耳朵是否竖立,以及爬行时使用的手脚多少。如果我们了解这些生理上的差异,我们就能更准确地判定一只家养宠物属于哪个具体家族中。 标签:红酒要闻https://www.stddjzkkll.cn/zi-xun/480614.html
5.拒绝忽悠!买猫常见用语图解(二)其次很多人说有时候血统级的猫咪不一定品相就一定比后院猫好,这其实是一个误区,因为大众的审美和猫咪协会的标准是有比较大的出入的,而且在血统级里面对猫咪的品相也是有精确的评级,如:赛级、优宠级、宠物级,有些协会也会有A、B、C、D、E级,血统猫咪按照相应的评级有着相应的价格,不用担心因为自己不懂而被骗。https://www.yoojia.com/ask/17-12070654314435957436.html
6.前端测试和后端测试的区别是什么那么,前端测试和后端测试的区别是什么呢? 1、测试重点不同:前端测试主要关注用户界面的设计和交互体验,包括页面布局、按钮、文本框、表单、链接等元素的设计和功能测试,以确保用户可以轻松地与应用程序或网站进行交互并完成所需的任务。后端测试则更注重系统功能的正确性、性能和安全性等方面的测试,以确保应用程序或网...https://www.pxwy.cn/news-id-80180.html
7.前端开发和后端开发的区别前端开发和后端开发的区别:一、展示的方式不同 前端指的是用户可见的界面,网站前端页面也就是网页的...https://www.hxsd.com/wenda/61939/
8.前端校验和后端校验区别前端校验和后端校验区别 技术标签:postman软件测试 前台验证数据格式 后台验证的是数据的正确性 当下流行的系统架构方案中,前端和后端都是分离开的。 目的:① 为了方便前端开发人员和后端开发人员可以同时开发;② 前后端分离也使得前后端的代码可以分开进行管理,方便了各自的版本迭代及控制。 1.1前端校验 就是通过前端...https://www.pianshen.com/article/90762848064/
9.前端产品经理和后端产品经理的主要区别是什么大白PM总结:前端产品和后端产品最大的不同是产品形态的不同、面向用户群体的不同。探讨前端产品经理和后端产品经理的主要区别我认为核心还是探讨前端产品和后端产品的区别。 前端产品经理 也叫2C产品经理或C端产品经理或客户端产品经理。主要面向普通用户或被服务者。比如**点评客户端,团购客户端,打车客户端等等。这...https://www.jianshu.com/p/53f7a203bce1
10.前端校验和后端校验的区别和优缺点腾讯云开发者社区作为一个程序员,在平时的编程过程中,我们肯定会接触过数据校验。今天我们来讨论一下前端校验和后端校验的区别与联系。有这么一句话,叫做前端校验防君子,后端校验防小人。 通常来说,后端校验比前端校验更安全,更可靠,前端校验可以增加用户体验,一般来说,在前端校验的东西在后端也必须校验(比如登陆用户名、密码),有些...https://www.cloud.tencent.com/developer/news/383761
11.全面讨论后端前端客户端的区别全面讨论 后端、前端、客户端的区别 帖子背景 楼主看到今年不少友友暑期实习都或多或少,被客户端岗位打捞起来面试;也有很多友友本来是投的后端,结果拿了客户端的offer,不知道改不改转客户端。 楼主之前在字节的CapCut做过半年的客户端开发实习生,对客户端有一个基本的了解,再加上后端楼主也实习过,所以两个方向...https://m.nowcoder.com/discuss/616306212254015488