除了SSR、CSR、还有ISR、SSG?🚀🚀🚀五分钟搞懂它们的区别

简介: 除了SSR、CSR、还有ISR、SSG?🚀🚀🚀五分钟搞懂它们的区别

在现代 Web 开发领域,经常会出现几个缩写词:SSR、CSR、ISR 和 SSG。这些术语对于理解 Web 应用程序的构建和交付方式至关重要。在本文中,我们将深入探讨这些缩写词的含义以及它们如何影响 Web 开发。

1.SSR(服务器端渲染)

「服务器端渲染」(SSR)是一种在服务器上渲染网页,然后将完全渲染的 HTML 页面发送到客户端浏览器的技术。它的工作原理如下:

当用户请求网页时,服务器会获取数据、生成 HTML,并将完整的页面发送到浏览器。

然后浏览器立即显示页面,同时下载并执行 JavaScript 和 CSS 文件。

SSR 以其 SEO 优势而闻名,因为搜索引擎可以轻松抓取 HTML 内容并为其建立索引。

2.CSR(客户端渲染)

「客户端渲染」(CSR)是一种将网页最初作为空 HTML shell 传递给浏览器的技术。然后,客户端 JavaScript 动态获取数据并在浏览器中呈现页面。企业社会责任的运作方式如下:

当用户请求页面时,服务器会发送最小的 HTML 结构以及 JavaScript 和 CSS 文件。

浏览器加载这些文件并执行 JavaScript,从而获取数据并生成内容。

CSR 提供了更具交互性的用户体验,但可能会导致初始页面加载速度变慢和 SEO 挑战。

3.ISR(增量静态再生)

「增量静态再生」(ISR)是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下:

在构建过程中,某些页面被预呈现为静态 HTML,而其他页面则被标记为“过时”。

当用户请求“过时”页面时,服务器会即时重新生成该页面并缓存结果以供后续请求使用。

ISR在性能和实时数据之间取得了平衡,使其适合动态但经常访问的页面。

4.SSG(静态站点生成)

「静态站点生成」(SSG)是一种在构建时生成网页并用作纯 HTML 文件的技术。SSG 是最直接的方法:

在构建过程中,所有页面都预渲染为静态 HTML 文件,包括构建时已知的任何数据。

当用户请求页面时,服务器仅提供预先构建的 HTML 文件。

SSG 提供出色的性能、可扩展性和安全性,但可能不适合高度动态的内容。

何时使用每种方法

  • 「SSR」:当 SEO 至关重要并且需要尽快向用户交付内容时,请使用 SSR。它非常适合内容驱动的网站和电子商务平台。
  • 「CSR」:当您需要高度交互和动态的 Web 应用程序时,请考虑 CSR。它非常适合单页应用程序 (SPA) 和严重依赖用户交互的 Web 应用程序。
  • 「ISR」:当您需要性能和实时数据更新之间的平衡时,选择 ISR。它适用于产品可用性不断变化的博客、新闻网站和电子商务网站。
  • 「SSG」:当您的内容不经常更改且性能优先时,请选择 SSG。它非常适合博客、文档网站和营销页面。

结论

了解 SSR、CSR、ISR 和 SSG 对于在 Web 开发中做出明智的决策至关重要。每种方法都有其优点和缺点,选择取决于项目的具体要求。通过有效地利用这些技术,您可以创建提供最佳用户体验和性能的 Web 应用程序。

原文链接:

https://dev.to/dj1samsoe/understanding-ssr-csr-isr-and-ssg-a-comprehensive-guide-add


相关文章
|
5月前
|
JavaScript 前端开发 API
【第42期】一文了解服务端渲染框架NextJS
【第42期】一文了解服务端渲染框架NextJS
419 0
|
数据采集 前端开发 JavaScript
服务器端渲染(SSR)与客户端渲染(CSR)的比较
服务器端渲染(SSR)与客户端渲染(CSR)的比较
1151 0
|
1月前
|
数据采集 缓存 搜索推荐
服务端渲染(SSR)与静态站点生成(SSG)结合使用
服务端渲染(SSR)与静态站点生成(SSG)结合使用
|
4月前
|
JavaScript 前端开发 搜索推荐
CSR、SSR与同构渲染全方位解析
CSR、SSR与同构渲染全方位解析
71 0
|
3月前
|
JavaScript 前端开发 搜索推荐
服务器端渲染技术SSR与ISR:深入解析与应用
【7月更文挑战第20天】服务器端渲染(SSR)和增量静态再生(ISR)作为现代Web开发中的两种重要渲染技术,各有其独特的优势和适用场景。在实际应用中,开发者应根据具体需求和条件选择合适的渲染模式。无论是追求极致的页面加载速度和SEO优化,还是实现内容的实时更新,SSR和ISR都能提供有效的解决方案。通过深入理解这些技术的工作原理和应用场景,开发者可以构建出更加高效、可靠和用户体验优异的Web应用。
|
5月前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
45 2
|
5月前
|
缓存 前端开发 搜索推荐
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
287 0
|
5月前
|
数据采集 JavaScript 前端开发
服务器端渲染(SSR)和客户端渲染(CSR)
服务器端渲染(SSR)和客户端渲染(CSR)
102 1
|
5月前
|
前端开发 搜索推荐 UED
从性能到用户体验,探索服务器端渲染(SSR)与客户端渲染(CSR)的比较与选择
在现代 Web 开发中,服务器端渲染(SSR)和客户端渲染(CSR)是两种常见的渲染方式。本文将对它们进行比较,从性能、开发体验和用户体验等方面探讨它们的优劣势,以帮助开发者做出合适的选择。
|
5月前
|
数据采集 前端开发 JavaScript
服务器端渲染(SSR)和客户端渲染(CSR)的比较与选择
服务器端渲染(SSR)和客户端渲染(CSR)是现代 Web 开发中广泛使用的两种渲染方式。本文将从性能、SEO、开发成本等角度对两者进行比较,并提供选择建议。