为下个 offer 充电的前端er 🔋

Appearance

React SSR 课程笔记 ​

1. 什么是 CSR (客户端渲染)？ ​

1.1. 定义与特点 ​

  • CSR: Client-Side Rendering，即客户端渲染。
  • 简介: 这是前端领域非常常见和传统的开发方式。我们平时使用 create-react-app 或 umi.js 等脚手架创建的 React 应用，默认就是 CSR 模式。
  • 核心: 浏览器获取到一个几乎为空的 HTML 文件，然后通过请求并执行 JavaScript 文件来动态生成页面内容并渲染。

1.2. 渲染流程 ​

  1. 请求页面: 浏览器向服务器发送请求。
  2. 返回空壳 HTML: 服务器返回一个仅包含基本结构（如一个 <div id="root"></div>）的 HTML 文件。
    html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  </head>
<body>
  <div id="root"></div> </body>
</html>
  3. 请求静态资源: 浏览器解析 HTML 时，发现需要加载外部的 CSS 和 JS 文件，于是再次向服务器发送请求。
  4. 执行 JS: 浏览器接收到 JS 文件后开始执行。
  5. 渲染页面: React 开始工作，执行组件生命周期、生成虚拟 DOM、映射为真实 DOM，最终将内容渲染到 <div id="root"> 中，用户才能看到完整页面。

1.3. 缺点 ​

  1. 首屏加载白屏时间长 (FCP 慢)

    • 从浏览器接收到空 HTML 到 JS 执行完毕渲染出内容，这个过程页面始终是空白的。
    • 白屏时间受两个因素影响：
      • JS 文件下载时间: 网速慢或 JS 包体积大时，白屏时间会更长。
      • JS 文件执行时间: 应用复杂、组件多或用户设备性能差时，执行时间会更长。
    • 这会导致较差的用户体验。

  2. 不利于 SEO (搜索引擎优化)

    • SEO: Search Engine Optimization。
    • 搜索引擎的爬虫抓取页面时，获取到的是服务器返回的空壳 HTML。
    • 尽管现代搜索引擎具备一定的 JS 执行能力，但能力有限且不喜欢这种方式。
    • 爬虫会认为你的页面没有内容，导致在搜索结果中排名靠后，甚至无法被有效收录。

2. 什么是 SSR (服务端渲染)？ ​

2.1. 定义与目标 ​

  • SSR: Server-Side Rendering，即服务端渲染。
  • 简介: 一项相对"古老"的技术，但在现代前端框架中焕发新生，用于解决 CSR 的问题。
  • 核心: 服务器在接收到浏览器请求后，直接在服务端将页面内容渲染成完整的 HTML 字符串，然后将这个包含内容的 HTML 返回给浏览器。

2.2. 渲染流程 ​

  1. 请求页面: 浏览器向服务器发送请求。
  2. 返回完整 HTML: 服务器在内部执行 React 代码，将组件渲染成完整的 HTML 结构，并将其返回给浏览器。
    html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  </head>
<body>
  <div id="root">
    <nav>...</nav>
    <main>
      <h1>新闻列表</h1>
      <ul>
        <li>新闻1</li>
        <li>新闻2</li>
      </ul>
    </main>
  </div>
  </body>
</html>
  3. 浏览器直接渲染: 浏览器接收到的是带有完整内容的 HTML，因此可以立即渲染出页面，用户能很快看到首屏内容。
  4. “悄悄”加载静态资源: 在用户浏览已有内容的同时，浏览器在后台加载页面所需的 CSS 和 JS 文件。
  5. 客户端接管 (Hydration): JS 加载并执行完毕后，React 会接管页面，为已有的 DOM 元素绑定事件监听，后续的交互和页面跳转（路由）将由客户端 JS 控制，应用变为一个 SPA。

2.3. 优点 ​

  1. 首屏加载速度快，用户体验好

    • 浏览器直接接收到可渲染的 HTML，避免了长时间的白屏。
    • 将计算密集型的渲染任务从（可能性能较差的）客户端转移到了（性能更强的）服务器上。

  2. 利于 SEO

    • 搜索引擎爬虫抓取到的是一个包含完整内容的 HTML 页面，可以轻松解析和收录页面信息，有利于搜索排名。

2.4. 缺点 ​

  1. 开发复杂度更高

    • 需要同时考虑浏览器和 Node.js 两种不同的运行环境。
    • 会遇到很多细节问题，对开发者的知识储备要求更高。

  2. 服务器压力增大

    • 原本服务器只提供静态文件，现在需要为每个请求实时渲染页面，增加了 CPU 和内存的开销。

3. 其他解决方案：预渲染 (Pre-rendering) ​

  • 简介: 解决 SEO 问题的另一种方案，比 SSR 简单。
  • 原理: 在项目构建打包时，就将特定路由的页面渲染成静态 HTML 文件。
  • 优点:
    • 有利于 SEO，因为爬虫可以直接抓取到静态内容。
  • 缺点:
    • 无法解决首屏白屏问题，因为它仍然是客户端渲染的逻辑。
    • 适用于内容不经常变动的静态页面。

总结: SSR 能同时解决 白屏 和 SEO 问题，而预渲染主要解决 SEO 问题。

4. 课程结构 ​

本课程分为两个主要部分：

  1. 第一章：原理与手动搭建

    • 目标: 深入理解 SSR 的工作原理和实现细节。
    • 内容: 从零开始，一步步手动搭建一个具备 SSR 功能的 React 项目，解决在此过程中遇到的各种问题。

  2. 第二章：框架应用 (脚手架)

    • 目标: 学习如何在实际项目中使用成熟的 SSR 框架。
    • 内容: 使用现成的框架（如 Umi.js 或 Next.js）来快速构建 SSR 应用。在公司中，通常会使用这些框架以提高开发效率。

5. SSR 的定位与应用场景 ​

前台开发 (面向用户) ​

  • 特点: 应用直接面向普通用户，如电商网站、新闻门户等。
  • 需求:
    • 良好的用户体验（不能长时间白屏）。
    • 需要被搜索引擎收录（利于 SEO）。
  • 结论: SSR 的主要应用场景。

中后台开发 (面向管理员) ​

  • 特点: 主要面向公司内部用户或系统管理员，如后台管理系统、数据看板等。
  • 需求:
    • 功能实用性是第一位，对首屏白屏时间有一定容忍度。
    • 不需要 SEO，甚至需要通过 robots.txt 协议禁止爬虫抓取。
  • 结论: 基本不需要 SSR，使用传统的 CSR 方式即可。

SSR 的定位: SSR 并非万能良药，它是在特定场景下（面向用户的 SPA 应用）解决特定问题（首屏白屏和 SEO）的一种技术方案。

6. 前置知识要求 ​

需要扎实的前端基础，是一门“集大成者”的课程。

  • JavaScript (ES6+)
  • 双环境开发能力:
    • 浏览器端: DOM, BOM, Web API 等。
    • Node.js 端: 搭建服务器，处理路由等。
  • HTTP 协议: 深入理解浏览器与服务器的交互过程。
  • 构建工具 Webpack: 需要手动配置 Webpack 来搭建 SSR 工程。
  • React 全家桶: React, React Router, Redux 等。