EnlightenCode

什么是 CSR、SSR 和 SSG？ ​

在现代 Web 开发中，CSR（客户端渲染）、SSR（服务器端渲染）和 SSG（静态站点生成）是三种常见的渲染方式。每种方式都有其独特的优缺点和适用场景。

SSR 全流程详解 ​

  1. 请求到达服务器：

    • 用户在浏览器中输入 URL 或点击链接，HTTP 请求被发送到服务器。

  2. 服务器接收请求：

    • 服务器接收到请求后，通常会通过一个 Node.js 服务器（如 Express）来处理请求。

  3. 初始化应用程序：

    • 服务器会创建一个新的 Vue 实例（或其他框架的实例，如 React、Angular）来处理请求。
    • 在这个阶段，应用程序的所有逻辑都会被执行，包括数据获取、路由解析等。

  4. 数据获取：

    • 服务器会根据请求的 URL 获取所需的数据。这通常涉及到调用 API 或查询数据库。
    • 获取的数据会被注入到 Vue 实例中，以便在渲染时使用。

  5. 组件渲染：

    • 服务器使用 Vue 的 SSR API（如 vue-server-renderer）将 Vue 组件渲染为 HTML 字符串。
    • 在这个过程中，Vue 会执行组件的生命周期钩子（如 created 和 beforeMount），但不会执行 mounted 及其后的钩子，因为这些钩子依赖于 DOM。

  6. 生成完整的 HTML：

    • 服务器将渲染的 HTML 字符串插入到一个完整的 HTML 模板中。
    • 这个模板通常包含基本的 HTML 结构、CSS 链接、JavaScript 脚本等。

  7. 发送响应：

    • 服务器将生成的完整 HTML 发送回客户端。

  8. 客户端接收 HTML：

    • 浏览器接收到 HTML 后，立即显示页面内容。
    • 这使得用户可以快速看到页面的初始内容，而不需要等待 JavaScript 加载和执行。

  9. 客户端激活（Hydration）：

    • 浏览器下载并执行 JavaScript 文件。
    • Vue（或其他框架）会接管已经渲染的 HTML，并将其转换为一个可交互的应用程序。
    • 这个过程称为“激活”或“hydration”，它将静态的 HTML 转换为动态的、可交互的 Vue 应用。

  10. 后续交互：

    • 一旦激活完成，应用程序的后续交互（如点击事件、表单提交等）将由客户端 JavaScript 处理。
    • 这与传统的客户端渲染应用程序的行为相同。

SSR 的优缺点 ​

优点：

  • 更快的首屏加载：因为初始 HTML 是在服务器上生成的，用户可以更快地看到页面内容。
  • 更好的 SEO：搜索引擎可以更容易地抓取和索引页面内容，因为它们不需要执行 JavaScript 来获取页面内容。

缺点：

  • 服务器负载增加：服务器需要为每个请求生成 HTML，这可能会增加服务器的负载。
  • 开发复杂性：SSR 需要处理更多的边界情况（如 window 对象的使用），这可能会增加开发的复杂性。

其他渲染方式的对比 ​

  • CSR（客户端渲染）：

    • 优点：更少的服务器负载，适合动态交互丰富的应用。
    • 缺点：首屏加载时间较长，SEO 友好性较差。

  • SSG（静态站点生成）：

    • 优点：极快的加载速度，适合内容不常变化的网站。
    • 缺点：不适合需要频繁更新内容的应用。

实践建议 ​

  • 选择合适的渲染方式：根据项目需求选择合适的渲染方式。对于需要快速首屏加载和良好 SEO 的项目，SSR 是一个不错的选择。
  • 优化服务器性能：使用缓存、CDN 等技术来减轻服务器负载。
  • 关注开发体验：使用现代框架（如 Next.js、Nuxt.js）来简化 SSR 的开发流程。