服务端渲染和客户端渲染的区别(一文搞懂服务端渲染和客户端渲染)

 分类:前端开发时间:2022-10-16 07:30:01点击:
服务端渲染和客户端渲染的区别(一文搞懂服务端渲染和客户端渲染)网址:

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

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

作者:速冻鱼

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: