您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

客户端渲染、服务器端渲染、页面静态化你知道区别么?

时间:2022-08-29 11:40:07  来源:  作者:互联网资讯看板

 

Client Side Rendering

NextJs 是一个非常流行的 React 框架,其中一个优美的特性是能够使用不同的呈现技术构建 Web 应用程序,例如

客户端渲染 CSR 服务器端渲染 SSR 静态站点生成 SSG 增量静态再生 ISR 客户端渲染CSR

这就是大多数 Web 框架(如 Angular 和 React)开箱即用的支持。这通常适用于单页应用程序(SPA)和具有大量用户交互(如游戏)和高度动态内容(如表单和聊天应用程序)的应用程序。

 

Client Side Rendering

基本上 web 浏览器最初会加载一个空的 html 文件。然后加载的 JAVAscript 和样式负责在客户端渲染页面

服务器端渲染SSR

CSR 的主要缺点是它 seo 不好。因此,大多数的 Web 框架,也提供了在服务器上呈现页面的能力。

 

Server Side Rendering

与 CSR 不同的是,每个页面都会向 AppServer 发起一个请求,然后在 AppServer 中动态呈现并为该页面提供完整的 HTML。因为每次用户请求时,它都会请求并呈现页面,所以页面服务时间比 CSR 应用程序要长。(需要服务端有比较好的性能)

静态网站生成SSG

为了避免在每个请求中渲染,为什么我们不在构建时生成这些文件,这样我们就可以在用户请求时 立即 为页面提供服务。

 

Static Site Generation

如果您想要构建一个充满静态内容(如 blog)的 Web 应用程序,这种技术将非常方便。一个缺点是内容可能过时,每次更改内容时都需要构建和部署应用程序。(在 CMS 中)

增量静态再生ISR

ISR 是 SSG 的下一个改进,它定期构建和重新验证新页面,以便内容永远不会过时。

 

Incremental Static Regeneration

比较

为了比较这四种技术,我们将考虑以下指标。

构建时间-值越少越好。 适用于动态内容-如果这个值很高,那么该技术更适合于具有大量动态内容的应用程序。 搜索引擎优化-大多数情况下,最好是有一个良好的搜索引擎优化价值。 页面服务/渲染时间-在网页浏览器中渲染整个页面需要多长时间。值越低越好。 最新内容-表明它总是提供最新的内容。值越高越好。 静态服务器/应用程序服务器-这种技术是否需要一个静态服务器或应用程序服务器。通常,静态服务器消耗的资源要比应用服务器少得多。

 

Comparison of CSR,SSR, SSG and ISR

一些关键点

与 SSR 相比,Page Serve/Render Time 在 CSR 中的使用时间更短,因为在初始资产加载之后,CSR 可以非常快速地加载其余页面。但在 SSR 中,每个页面请求都将由应用服务器提供。 与 SSG 相比,页面服务/渲染时间在 ISR 中更长,因为 ISR 定期从服务器请求更新的页面。 ISR 没有最新的内容,因为有一个小窗口时间,用户可以在定期内容刷新之前获得过时的内容。 结论

在 Highlevel 中,我们可以根据应用程序的动态交互级别将这些渲染技术分为两大类。

CSR 和 SSR 可用于开发高度动态的 Web 应用程序,根据场景的不同,它们各有优缺点。 如果您有一个高度静态的内容,您可以使用 SSG 或 ISR。ISR 更先进和优化,但它需要特定的平台才能工作。 参考 NextJs

作者:速冻鱼

出处:https://mp.weixin.qq.com/s/62nsr8Kb0ZgiQVaZjkQC3w



Tags:页面   点击:( )  评论:( )
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:[email protected]),我们将及时更正、删除,谢谢。
▌相关推荐
Client Side RenderingNextJs 是一个非常流行的 React 框架,其中一个优美的特性是能够使用不同的呈现技术构建 Web 应用程序,例如客户端渲染 CSR 服务器端渲染 SSR 静态站点...【详细内容】
2022-08-29  Tags: 页面  点击:(2)  评论:(0)  加入收藏
最近的报告显示,谷歌正在向数量极少部分用户测试其桌面上的搜索主页的全新布局。这个 “新Google.com “与传统的主页相去甚远,是一块干净的页面。除了搜索栏和不断变化的涂鸦...【详细内容】
2022-08-08  Tags: 页面  点击:(23)  评论:(0)  加入收藏
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><frameset rows="10%,*"><frame src="upper/one.php" name="logo"><frameset cols="20%,...【详细内容】
2022-08-03  Tags: 页面  点击:(34)  评论:(0)  加入收藏
在开发vue项目过程中,因为项目原因需要实现局部刷新操作。就比如最常见的管理系统。左边是菜单,右边一大块是路由区域。因为如果使用window.location.x的方式的话会导致整个网...【详细内容】
2022-07-22  Tags: 页面  点击:(64)  评论:(0)  加入收藏
1、用户需求客户的WEB网站后台目前只有一台服务器存在单点的问题,但暂时没有打算要做成冗余的方式。在与应用开发团沟通的过程中,应用开发提到如果网站宕机,不想让用户看到该页...【详细内容】
2022-07-20  Tags: 页面  点击:(27)  评论:(0)  加入收藏
添加新页面可以为您的网站带来新的流量和访问者,并且当它们在搜索结果中排名良好时,它们最有效地实现了这一目标。但是,为了让您的内容出现在搜索结果中,需要对其进行索引。这意...【详细内容】
2022-07-19  Tags: 页面  点击:(32)  评论:(0)  加入收藏
网站是什么原因让搜素引擎不收录呢?这要把国内外搜引擎区分看待,因为态度趋向和商业思维有较大的差异。国内搜索引擎不收录网站的可能原因。一、百度搜索百度搜索是现在缺什么...【详细内容】
2022-06-28  Tags: 页面  点击:(71)  评论:(0)  加入收藏
在使用word文档时经常会在末尾多出空白页面,这些用不上的页面留着会影响文档的整洁性,那么这些空白的文档该如何删除呢?下面就和大家讲讲电脑word如何删除空白页面吧。更多小白...【详细内容】
2022-06-21  Tags: 页面  点击:(83)  评论:(0)  加入收藏
跟随我八年的微信,因为情感因素我连同手机号码一起注销了,起初内心也会有一些纠结,问自己真的注销了就能翻篇吗?能,给自己勇气,坚定的点开微信 -账号与安全-微信安全中心-注销账号...【详细内容】
2022-06-17  Tags: 页面  点击:(208)  评论:(0)  加入收藏
如果你在你的网站上发表长篇文章,对你的读者来说,滚动浏览大块的文字可能是很乏味的。这个时候你需要分页,也就是说分解你的文章文字的一个简单方法是将你的文章分成多个页面。...【详细内容】
2022-06-01  Tags: 页面  点击:(88)  评论:(0)  加入收藏
▌澳门威斯尼斯人app官方下载推荐
Client Side RenderingNextJs 是一个非常流行的 React 框架,其中一个优美的特性是能够使用不同的呈现技术构建 Web 应用程序,例如客户端渲染 CSR 服务器端渲染 SSR 静态站点...【详细内容】
2022-08-29  互联网资讯看板     Tags:页面   点击:(2)  评论:(0)  加入收藏
SSL证书概念:SSL证书类似于驾驶证、护照和营业执照的电子副本,是数字证书的一种,因为配置在服务器上也被称为SSL服务器证书。SSL证书提供了一种在互联网上身份验证的方式,用来标...【详细内容】
2022-08-19  枫树SEO    Tags:SSL证书   点击:(19)  评论:(0)  加入收藏
CDN是什么?CDN是Content Delivery Network的简称,即“内容分发网络”的意思。一般我们所说的CDN加速,一般是指网站加速或者用户下载资源加速。CDN基本思路就是尽可能避开互联网...【详细内容】
2022-08-15    搜狐号  Tags:CDN   点击:(15)  评论:(0)  加入收藏
比如我的网站,我同时申请了两个域名vxmat.cn和vxmat.com,我需要实现1、两个域名都访问同一个网站;2、同时支持带www和不带www的访问;3、必须部署https,当用户以http方式访问时,必...【详细内容】
2022-08-15  不了阁飞哥    Tags:SSL证书   点击:(16)  评论:(0)  加入收藏
对于 CDN 这个东西,相信大家都有耳闻,感觉既陌生但又熟悉。最近深入了解了一下 CDN,这才发现原来它如此重要!今天就跟大家分享下关于 CDN 的那些事儿。浏览器的网络请求要理解 C...【详细内容】
2022-08-11  南方葵籽    Tags:CDN   点击:(15)  评论:(0)  加入收藏
据统计,超过80%的互联网用户会重复访问20%的信息资源,这一现状给缓存技术的应用提供了先决条件。为减少网络中冗余数据的重复传输,CDN技术应运而生。通过CDN将广域传输转为本地...【详细内容】
2022-08-10  中科三方    Tags:CDN   点击:(8)  评论:(0)  加入收藏
1.什么是SSL证书?SSL证书就是遵守SSL安全套接层协议的服务器数字证书,而SSL安全协议最初是由美国网景Netscape Communication公司设计开发,全称为安全套接层协议(Secure Sockets...【详细内容】
2022-08-03    新网  Tags:SSL证书   点击:(17)  评论:(0)  加入收藏
独立站是现在外贸企业用于获取询盘比较好的方式之一,当你清晰地知道独立站是如何运作的时候,你就会知道它是一种多么好的推广引流方式。如果你对于独立站的了解知之甚少,那么就...【详细内容】
2022-08-02  小渔夫  搜狐号  Tags:外贸独立站   点击:(7)  评论:(0)  加入收藏
反向链接的定义是从一个网站到另一个网站的链接。在大多数情况下,当谈到反向链接时,反向链接是从另一个站点到 您的站点的链接。它们也有几个不同的名称,包括超链接、传入链接...【详细内容】
2022-08-01  听石头讲谷歌    Tags:外贸独立站   点击:(20)  评论:(0)  加入收藏
前言无论是前端还是后端,性能优化其实是每一个开发都无法避开的大山。另一方面,这种开放式的提问深受面试官的青睐,能够快速地区分求职者的水平。网上的答案层出不穷,似乎都只是...【详细内容】
2022-07-30  程序那点事    Tags:web性能   点击:(26)  评论:(0)  加入收藏
站内最新
站内热门
站内头条