理解运行环境

React 应用可以在不同的环境中运行,了解这些环境对于构建高效的应用至关重要。

客户端 vs 服务端

客户端渲染 (CSR)

在客户端渲染中,浏览器下载 JavaScript 代码,然后执行它来生成 UI。

  • 页面交互更流畅
  • 初始加载可能较慢
  • SEO 相对较差

服务端渲染 (SSR)

在服务端渲染中,服务器生成 HTML 并发送到浏览器。

  • 更快的首次内容绘制
  • 更好的 SEO
  • 需要服务器资源

静态站点生成 (SSG)

在构建时生成 HTML,适用于内容不经常变化的网站。

  • 极快的加载速度
  • 最佳的 SEO
  • 内容更新需要重新构建

React 在不同环境中的工作方式

浏览器环境

React 最常见的运行环境。React 通过操作 DOM 来更新 UI。

Node.js 环境

React 18+ 支持在服务端运行,可以生成 HTML 字符串。

选择合适的渲染策略

  • 营销网站:SSR 或 SSG
  • 管理后台:CSR
  • 电商网站:SSR + CSR 混合
  • 内容博客:SSG

下一步

继续学习项目结构

这篇文章有帮助吗?