Javascript 在React-SSR工作流中，JSX的呈现在哪里？

我一直在阅读一些教程，比如解释服务器端呈现SSR，这些教程会给出一些注释，比如现在，对服务器的所有请求都返回完全呈现的HTML

我的理解是，babel只是将react JSX解析为香草JavaScript，然后可以将其传递给客户端并呈现。这一概念反映在教程中，它们都导入了某种类型的“bundle.js”文件或其他文件。。然而，他们一直在说，就好像JSX在服务器上一路呈现为HTML，然后发送到客户端。这听起来更像是视图引擎的行为，比如pug或ejs

这种推理上的失误阻碍了我的进步，因为我觉得我错过了什么。有人能解释一下吗

我的理解是，babel只是将react jsx解析为vanilla js，然后将其传递给客户端并呈现

这是一种可能性，也是最常见的一种。然而，JSX只是一种描述React元素树的语言，它仍然需要呈现为HTML，以便在web应用程序中可见。在某种程度上，JSX代码的翻译与服务器端呈现是正交的。工作流可以通过以下简化管道表示：

--- 1 ---------- 2 ------ |JSX-->|React元素树-->|HTML树| --- ---------- ------ 步骤1通常在部署时完成，通过在构建过程中集成Babel。但是，步骤2最初可以由客户端或服务器执行，具体取决于项目的设置方式。当web应用程序被编程为调用ReactDOM.render、root之类的东西时，客户端从一个简单的HTML文档开始，需要将其扩展到DOM树

有了SSR，我们在服务器上完成了第2步，从而为客户端提供了一个扩展的DOM树，甚至在执行JavaScript代码之前。这个过程可能类似于模板引擎，但它所做的只是运行React的渲染步骤，例如，请参见。视图的其余逻辑和状态由客户端处理。这是通过方法实现的，该方法将必要的侦听器附加到服务器呈现的组件

这提到了进行SSR的多个好处：

现在，用户不必等待JS加载，只要初始请求返回响应，就可以获得完全呈现的HTML

想象一下，对于在慢速3G网络上导航的用户来说，这是一个巨大的进步。你不必等待20多秒才能加载网站，你几乎可以立即在他们的屏幕上看到内容

[……]

现在，向服务器发出的所有请求都返回完全呈现的HTML。对你的搜索引擎优化部门来说是个好消息

爬虫程序现在会将您的网站视为web上的任何其他静态网站，并将索引您在服务器上呈现的所有内容

综上所述，我们从SSR中获得的两个主要好处是：

加快初始页面呈现时间 完全可索引HTML页面

---

Babel是一个transpiler，从JSX发出ES5JavaScript。SSR直接呈现为HTML。这就是示例中react dom/server和htmlTemplate中的renderToString所做的-您只需插入一个呈现的react dom，因此它不需要完整的模板引擎。2件事。1 React根据定义将组件转换为HTML 2 JSX可用于使这些组件的定义更易于阅读和编写。JSX可能看起来像HTML，但实际上更像是一种域特定的编程语言，需要编译才能工作。@E_net4我不知道是否应该注意这一点。但是你对我的问题的编辑使它完全不适用于我的问题。显然，服务器端渲染发生在服务器上。。。也许我说得不恰当，但你肯定说得更离题了。这是可能的，我道歉。但在我的辩护中，它也显示了你的问题不清楚，我的编辑是试图让它成为焦点。在这些情况下，考虑进一步的编辑，以改进和重新定向问题到你的问题。从你在下面发表的评论来看，你似乎对React with SSR和传统模板引擎之间的区别感到困惑。这很公平。虽然这不是你想要的真正问题，但有些人可能仍然会从中发现价值。你可能也对类似的问题感兴趣：你找到了我误解的根源。这与另一个模板引擎有何不同？因此，根据您对react SSR和模板引擎之间差异的解释，我不希望在服务器渲染期间注入任何状态。曾经这是正确的吗？此外，您提到的更快的初始页面加载和可索引html页面的好处是ap 也适用于模板引擎。对的