简介

SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。

企业社会责任

CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对 JavaScript 包和 CSS 样式的引用。CSR 应用程序称为单页应用程序

企业社会责任如何运作?

1. 来自浏览器的初始请求

2. 服务器通过返回一个空的 HTML 页面进行响应,其中仅包含对您的 JavaScript 包和 CSS 样式的引用。

3. 然后浏览器开始下载页面的 JavaScript。

4. 浏览器然后执行 JavaScript。

5. 页面现在是交互式的。

使用CSR的优势

1. 手机app手感——由于app的导航性能;它有移动应用的感觉

2. 与渐进式 Web 应用程序相得益彰——客户端渲染的应用程序与 PWA 相得益彰,因为代码可以完全在浏览器上呈现。

3. 更快的网站导航 - CSR 提供更快的页面导航,因为无需下载新的 HTML 文件

使用 CSR 的主要缺点

• 对 SEO 不利 - CSR 对 SEO 不利,因为将 JavaScript 转换为 HTML 需要时间,还因为从服务器获得的响应是一个空的 HTML 页面,仅引用 JavaScript 包和 CSS 样式。

何时使用 CSR

1. 当您的应用程序有大量动态数据时。

2. 当您的应用程序具有非常复杂的 UI 和许多页面/功能时。

客户端框架示例

1. 反应

2. Vue

3. 角度

SSR

SSR 代表服务器端渲染。 SSR 是由服务器执行渲染的过程。它是一种呈现模式,在这种模式下,客户端向服务器发送请求,而不是服务器提供空的 HTML 页面,而是通过提供完全填充的 HTML 页面来响应。

服务器将在每次请求时为页面提供服务,这意味着每次请求都会生成 HTML。

SSR是如何工作的

1. 请求由客户端发送到 Web 服务器。

2. 浏览器然后连接到服务器,该服务器已经具有页面的预渲染 HTML 和 CSS 代码。

3. 然后服务器通过发送回一个完全占用的 HTML 页面来响应。

4. 浏览器然后下载服务器上现成的页面的 JavaScript。

5. 然后浏览器执行 JavaScript。

6. 页面现在已完全加载并可以交互。

使用SSR的优点

1. 有利于 SEO - 由于服务器端渲染页面具有更快的初始页面加载时间,搜索引擎机器人可以很好地抓取和索引页面。

2. 惊人的用户体验——由于 SSR 页面具有更快的初始页面加载时间,它们提供了良好的用户体验。

3. 没有慢速互联网连接障碍 - 如果用户的互联网连接速度慢,他/她可以在处理 JavaScript 时查看呈现的 HTML 页面。

使用SSR的主要缺点

1. 服务器成本——SSR 应用程序通常需要更大、更强大的服务器来提供高性能,这通常会导致购买和维护服务器的高昂费用。

2. 部署和托管的复杂性 - 将您的应用程序配置为在服务器上的不同环境中工作可能很困难

3. 页面转换缓慢。

什么时候使用SSR

1. 当您想要良好的 SEO 性能时。

2. 当您想要更快的数据传输时。

3. 当你有动态内容时。

服务器端框架示例

1. NuxtJs

2. NextJs

3. SvelteKit

SSG

SSG 代表静态站点生成器。 SSG 是一种在 CDN(内容交付网络)上生成完整静态 HTML 网站的工具。在 SSG 中,HTML 是在构建时生成的。

SSG 的工作原理

1. 在内容到达 CDN 之前的构建时,SSG 或框架从文件中读取内容。

2. 内容然后根据模板呈现为 HTML 并提供给 CDN。

3. 然后将结果保存在一个目录中,并对其进行布局以匹配源文件,并在请求查看内容时保持它们可用。

使用SSG的优势

1. 速度极快 - 静态生成的网站速度极快,因为您网站的内容是提前生成为 HTML 文件的。当用户访问您的应用程序并请求某个页面时,服务器将快速响应并提供服务。它不必生成任何 HTML,它只是提供它。

2. 最容易托管。

3. 出色的 SEO 性能。

使用 SSG 的主要缺点

1. 构建时间——SSG 的最大损失是构建时间,因为一旦页面发布,更新它们的唯一方法是再次构建应用程序,这可能需要一些时间。

何时使用 SSG

1.当你有很多静态内容时。

2. 当您想要良好的 SEO 性能时。

3. 当您想要一个快速的网站时。

####SSG 框架示例

4. NuxtJs

5. NextJs

6. 盖茨比

ISR

ISR 代表增量静态再生。它是一种渲染模式,在每页的基础上使用静态生成,而无需构建整个站点。

具有 ISR 功能的框架示例

1. NuxtJs

2. NextJs

结论

我希望你喜欢它!如果你想支持我,请关注我或在这里购买meacoffee谢谢!祝你今天过得愉快