React JS 是如何渲染的？

Question

这可能是一个愚蠢的问题，但是在阅读了很多文档之后，我仍然不确定。我知道有 3 种主要的渲染类型：

• 服务器端渲染（在请求时渲染）
• 客户端渲染（在客户端渲染）
• 静态站点生成（在构建时呈现）

我对 Next JS 有一些经验，我知道您可以在 Next JS 中为页面选择所需的渲染类型。

但是，对于 React JS，从我在这里和那里阅读的内容来看，它似乎是客户端渲染。但是当我托管一个 React 网页（比如在 S3 上）时，我会先构建它并将生成的静态内容托管在 S3 上。这不是意味着 React JS 属于 静态站点生成 类别吗？无论如何，“构建操作”在做什么，它与渲染有什么不同？

Answer 1

当您编写代码时，您很可能会将您的关注点和组件分离到不同的文件中。使用 React，您可能有每个组件的 .js 文件，也可能有一个 .css 文件等。这对于组织工作流非常有用，但对于生产应用程序来说却不是这样。

当您“构建”您的项目时，react 会获取所有这些文件并将它们合并在一起并针对快速页面加载进行优化。留下一个构建目录，其中包含准备部署的文件。

在页面加载时进行渲染。这是通过检查需要加载哪些组件以及它们处于什么状态来确定 UI 外观的反应过程。