反应服务器渲染
React server Rendering
我想创建一个服务器端 React 应用程序，但我有一些疑问：
1) 当你使用 react-dom/server 中的 renderToString 时，你是否还需要使用 webpack 来构建项目，或者这样就可以了？
2) 是否需要添加
<script src="/bundle.js"></script>
到html？如果是这样，为什么？ renderToString 是否已经将此文件作为字符串传递？
谢谢
这两件事没有关系。 renderToString 所做的就是获取 React 组件呈现的内容，作为 HTML 的字符串（而不是创建对象来表示组件并尝试将它们呈现到 DOM 中，就像在客户端）。它 return 是那个字符串。 React 通常仅用于呈现 <body> 内的元素，因此通常您会将根 React 组件的内容呈现为字符串，然后将该字符串插入某种包含您的文档类型的模板中，<html>、<head> 和 <body> 元素。然后由您的服务器 return 组成 HTML 文档的这串文本由您决定。
使用 webpack 的需要以及将 JS 应用程序作为 <script> 包含在您发送给客户端的 HTML 中的需要也未解决。通常是的，你需要两者都做。
- 如果您遵循标准的 React 开发实践（例如，使用 ES6 语法、使用 commonJS 或 es6 模块导入系统），则需要使用 webpack（或其他模块构建器 and/or 转译器）。 （理论上，你可以用你所有的 React 代码编写一个单独的 JS 文件，不使用 JSX 语法，使用 ES5 兼容的代码，不需要构建或转译，但这无疑是非常罕见的。）这只是关于生产浏览器会理解的JS代码。
- 您需要在客户端包含 React 应用程序，因为当您在服务器端呈现时，您只是创建了一个 HTML 的字符串。与任何 HTML 一样，如果没有 JS 来处理交互，那将是静态的。因此，您在浏览器中加载 JS 应用程序的客户端构建，并且在它运行时，客户端 React 库确定 DOM 应该是什么样子，并在您检查 DOM 时从服务器渲染它，如果它们匹配，则不需要重新渲染任何东西。 （如果它们不匹配，客户端的 React 将重新渲染您的应用程序，这会破坏服务器端渲染的性能优势，因此您的应用程序在两种环境中呈现完全相同很重要。）您需要客户端加载端应用程序以绑定和触发事件处理程序、处理页面路由等——作为客户端 JS 应用程序，它的工作方式与任何其他客户端 JS 应用程序一样，无论它最初是否由服务器呈现。
添加到@Brendan 的回答（他正确地提到了 webpack 的使用）：
- SSR 的主要原因是能够发送 Html 而不是用于 SEO 的纯 JS 和更快的加载时间。不过这不是强制性的，谨慎使用，也许你不需要 SSR。
- renderToString 仅发送 html 在节点服务器上呈现的内容，而不是您的浏览器。所以默认情况下它不知道它被渲染的设备、个性化（如 cookie 等）、屏幕大小等。window 和文档对象在节点上不存在。您获得的唯一好处是静态 Html.
- bundle.js 是 JS 挂钩，它将像 SPA（单页应用程序）一样呈现内容，而不管提供的静态 html。这就是使您的网站充满活力的原因。在这里你可以做一些事情，比如 flex wrap 使网站响应。这在 SSR 中是不可能的（不是开箱即用的）。
如果您刚刚开始使用 SSR，本文可能会对您有所帮助：
https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc。
有一个简单的 hack，你可能想尝试让生活更简单。
我想创建一个服务器端 React 应用程序，但我有一些疑问：
1) 当你使用 react-dom/server 中的 renderToString 时，你是否还需要使用 webpack 来构建项目，或者这样就可以了？
2) 是否需要添加
<script src="/bundle.js"></script>
到html？如果是这样，为什么？ renderToString 是否已经将此文件作为字符串传递？ 谢谢
这两件事没有关系。
renderToString所做的就是获取 React 组件呈现的内容，作为 HTML 的字符串（而不是创建对象来表示组件并尝试将它们呈现到 DOM 中，就像在客户端）。它 return 是那个字符串。 React 通常仅用于呈现<body>内的元素，因此通常您会将根 React 组件的内容呈现为字符串，然后将该字符串插入某种包含您的文档类型的模板中，<html>、<head>和<body>元素。然后由您的服务器 return 组成 HTML 文档的这串文本由您决定。使用 webpack 的需要以及将 JS 应用程序作为
<script>包含在您发送给客户端的 HTML 中的需要也未解决。通常是的，你需要两者都做。- 如果您遵循标准的 React 开发实践（例如，使用 ES6 语法、使用 commonJS 或 es6 模块导入系统），则需要使用 webpack（或其他模块构建器 and/or 转译器）。 （理论上，你可以用你所有的 React 代码编写一个单独的 JS 文件，不使用 JSX 语法，使用 ES5 兼容的代码，不需要构建或转译，但这无疑是非常罕见的。）这只是关于生产浏览器会理解的JS代码。
- 您需要在客户端包含 React 应用程序，因为当您在服务器端呈现时，您只是创建了一个 HTML 的字符串。与任何 HTML 一样，如果没有 JS 来处理交互，那将是静态的。因此，您在浏览器中加载 JS 应用程序的客户端构建，并且在它运行时，客户端 React 库确定 DOM 应该是什么样子，并在您检查 DOM 时从服务器渲染它，如果它们匹配，则不需要重新渲染任何东西。 （如果它们不匹配，客户端的 React 将重新渲染您的应用程序，这会破坏服务器端渲染的性能优势，因此您的应用程序在两种环境中呈现完全相同很重要。）您需要客户端加载端应用程序以绑定和触发事件处理程序、处理页面路由等——作为客户端 JS 应用程序，它的工作方式与任何其他客户端 JS 应用程序一样，无论它最初是否由服务器呈现。
添加到@Brendan 的回答（他正确地提到了 webpack 的使用）：
- SSR 的主要原因是能够发送 Html 而不是用于 SEO 的纯 JS 和更快的加载时间。不过这不是强制性的，谨慎使用，也许你不需要 SSR。
- renderToString 仅发送 html 在节点服务器上呈现的内容，而不是您的浏览器。所以默认情况下它不知道它被渲染的设备、个性化（如 cookie 等）、屏幕大小等。window 和文档对象在节点上不存在。您获得的唯一好处是静态 Html.
- bundle.js 是 JS 挂钩，它将像 SPA（单页应用程序）一样呈现内容，而不管提供的静态 html。这就是使您的网站充满活力的原因。在这里你可以做一些事情，比如 flex wrap 使网站响应。这在 SSR 中是不可能的（不是开箱即用的）。
如果您刚刚开始使用 SSR，本文可能会对您有所帮助： https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc。 有一个简单的 hack，你可能想尝试让生活更简单。