React JS的渲染机制是怎样的？构建操作与渲染有什么区别？

原生React（未搭配SSR/SSG框架）默认属于客户端渲染范畴，不属于静态站点生成。

React构建操作的实际逻辑 #

你执行npm run build对React项目做构建时，只做代码编译打包的预处理工作，不会完成页面内容渲染：

• 把JSX、TS等浏览器无法直接识别的语法编译为原生JavaScript代码
• 完成代码压缩、tree-shaking、chunk分割等性能优化操作
• 最终生成的产物里，HTML入口文件只有一个空的根DOM节点，以及打包后JS资源的引用链接，不存在任何渲染完成的页面内容。

与静态站点生成的核心差异 #

静态站点生成（SSG）的核心是构建阶段就完成页面内容渲染：构建时会直接执行组件代码，把组件渲染为完整的HTML字符串，每个页面对应一个携带完整内容的HTML静态文件，用户请求时直接返回该HTML，首屏无需等待JS加载执行即可看到内容。

而原生React部署到S3后，完整的渲染流程全在客户端完成：

1. 用户请求资源时，S3返回几乎空白的HTML入口文件
2. 浏览器下载HTML内引用的JS包
3. JS加载执行完成后，才会在用户本地把React组件渲染为真实DOM，填充到根节点中
   整个渲染过程全部发生在用户的浏览器侧，所以本质是客户端渲染。

构建和渲染的核心区别 #

• 构建是预处理流程：仅负责把开发者编写的源码，转换为目标运行环境可直接执行的生产代码，本身不负责生成用户可见的页面内容。只有SSG这类方案，会把渲染步骤前置到构建阶段执行。
• 渲染是内容生成流程：核心是把组件代码转换为用户可见的DOM/HTML内容，按照执行时机和执行位置的差异，分为三类：
  • 服务端渲染：用户发起请求时，在服务端完成组件到HTML的转换
  • 客户端渲染：JS资源加载完成后，在用户浏览器侧完成组件到DOM的转换
  • 静态站点生成：项目构建阶段，在打包机上完成组件到HTML的转换

内容的提问来源于stack exchange，提问作者user16401944