呈现内容驱动型 Web 应用

渲染是指创建所需代码来创建最终用户可通过浏览器互动的页面的过程。这包括准备内容、应用逻辑和处理，以及添加任何界面元素和显示最终页面所需的其他必需组件。内容驱动型应用侧重于加载速度快、延迟时间短和渲染速度快。

服务器端渲染 (SSR)

服务器端呈现 (SSR) 是指在服务器上呈现网页，然后将完全呈现的 HTML 发送到客户端的浏览器，而不是使用 JavaScript 在客户端上呈现这些网页。当用户访问应用时，其浏览器会向服务器发送请求。应用会在服务器上处理请求（包括从数据库或外部 API 收集数据），然后呈现所请求网页的 HTML。然后，服务器会将完全呈现的网页 HTML 发送回用户的浏览器。当用户的浏览器收到 HTML 时，浏览器会加载所有必需的 JavaScript 文件。

前往 web.dev 了解 HTML。

使用 SSR 的好处包括：快速的初始加载速度、良好的搜索引擎优化 (SEO) 性能、可靠性以及良好的整体用户体验。 但是，由于性能开销以及构建和维护支持 SSR 的应用所需的开发技能，SSR 可能比客户端渲染 (CSR) 更加复杂。SSR 特别适合内容驱动的 Web 应用、电子商务平台以及任何需要良好 SEO 性能和快速初始响应速度的应用。

静态网站生成 (SSG)

静态网站生成 (SSG) 会在构建时生成静态 HTML 文件，并将其提供给用户，而无需服务器端或客户端呈现。Web 内容通常采用结构化格式（例如 Markdown、JSON 或 YAML），包括文本、图片和其他资源。静态网站生成器工具（如 Hugo 或 Jekyll）会处理内容并生成 HTML、CSS 和 JavaScript 文件。静态输出是整个网站，而这些静态文件会部署到网络服务器、CDN 或托管服务。

请访问 web.dev 详细了解 CSS 和 HTML。

由于文件是静态的，因此可以缓存，因此加载速度非常快。对于不经常更改或通过定期网站构建进行更新的 Web 应用，SSG 是一个不错的选择。它不适合具有动态互动性的 Web 应用。

客户端渲染 (CSR)

客户端呈现 (CSR) 发生在客户端的浏览器上，而不是服务器上。 Web 应用通常使用最少的 HTML 模板加载，然后使用 JavaScript 以及来自服务器或 API 的数据动态操控内容。在收到应用请求后，服务器会发送最小的 HTML 文档，其中包含呈现网页所需的基本结构和 JavaScript 代码。JavaScript 代码会在用户的浏览器中执行。然后，代码会处理提取的数据并生成内容，包括 CSS、HTML 和所有交互元素。然后，JavaScript 代码会对用户互动（例如表单提交）做出响应。

CSR 的优势包括快速网页转换和响应迅速的界面。 与 SSR 相比，基于 CSR 的 Web 应用的初始加载时间通常较长，并且可能会带来 SEO 挑战。随着 CSR 应用的不断增长，其开发和维护工作会变得越来越复杂。