乐趣区

关于前端:web-开发里-SSRCSR-和-SSG-的区别

本文介绍这三种 Web 前端开发畛域中的术语的区别。

CSR – Client Side Rendering

一种在浏览器上执行 JavaScript 以生成 DOM 并在挂载后显示内容的办法。

页面初始加载不显示任何内容,hydration 实现后显示。

应用 Create React App 工具库创立的 React 应用程序以这种形式出现。

SSR – Server Side Rendering

一种在服务器端评估和执行组件并以 HTML 和起码的 JavaScript 交付后果的办法。

每次向服务器发出请求时,都会在服务器端解决并生成 HTML。

Nuxt.js、Next.js 等都是这样渲染的。

内容从初始加载开始显示,而后通过 Hydration 变为交互式。(例如,<Link /> 使其可跳转)

它被认为具备比 CSR 更好的性能和 SEO 敌对。

SSG – Server Side Generation

与 SSR 一样,HTML 首先在服务器端生成。

SSG 和 SSR 的区别在于 HTML 是在 构建 时生成的,而内容是在每次发出请求时从 CDN 交付的。

这用于动态页面,例如博客、帮忙站点和电子商务产品列表。

SSG 具备比 SSR 更好的性能,因为 HTML 是在构建时生成的。

默认状况下,Next.js 预渲染每个页面。这意味着 Next.js 会提前为每个页面生成 HTML,而不是全副由客户端 JavaScript 实现。预渲染能够带来更好的性能和 SEO。

每个生成的 HTML 都与该页面所需的起码 JavaScript 代码相关联。当浏览器加载页面时,其 JavaScript 代码将运行并使页面处于齐全可交互状态,这个过程称为 Hydration.

如何抉择这三种渲染形式?

能够在用户申请之前预渲染页面吗?

如果是,请应用 SSG。

如果不是,请应用 SSR 或 CSR。

退出移动版