反应服务器渲染答案

【问题标题】：React server Rendering反应服务器渲染
【发布时间】：2018-05-10 11:54:26
【问题描述】：

我想创建一个服务器端的 react 应用，我有几个疑问：

1) 当你使用 react-dom/server 中的 renderToString 时，你是否还需要使用 webpack 来构建项目，或者这样就可以了？

2) 是否需要添加

    <script src="/bundle.js"></script>

到 html ？如果有，为什么？不是 renderToString 已经将这个文件作为字符串传递了吗？谢谢

【问题讨论】：

2) 是的，你需要包含 bundle.js 脚本，因为你已经为你的 ssr 应用添加了水合物
1) 视情况而定，如果您在后端使用 jsx，则必须将该代码转换为常规 javascript

标签： reactjs webpack server-side-rendering

【解决方案1】：

这两件事无关。 renderToString 所做的只是获取你的 React 组件呈现的内容，作为 HTML 字符串（而不是像在客户端上那样创建对象来表示组件并尝试将它们呈现到 DOM 中）。它返回该字符串。 React 通常仅用于渲染 <body> 内的元素，因此通常您会将根 React 组件的内容渲染为字符串，然后将该字符串插入到包含您的文档类型 <html> 的某种模板中、<head> 和 <body> 元素。然后由您决定让您的服务器返回构成 HTML 文档的文本字符串。
使用 webpack 的需要以及将 JS 应用程序作为<script> 包含在您发送给客户端的 HTML 中的需要也无关紧要。通常是的，你需要两者都做。
- 如果您遵循标准的 React 开发实践（例如使用 ES6 语法，使用 commonJS 或 es6 模块导入系统），则需要使用 webpack（或其他模块构建器和/或转译器）。（理论上你可以用你所有的 React 代码编写一个 JS 文件，不使用 JSX 语法，在 ES5 兼容的代码中不需要构建或转译，但这无疑是非常罕见的。）这只是关于生成浏览器可以理解的 JS 代码。
- 您需要在客户端包含 React 应用程序，因为当您在服务器上呈现时，您只是创建了一个 HTML 字符串。像任何 HTML 一样，这将是静态的，没有 JS 来处理交互。所以你在浏览器中加载你的 JS 应用程序的客户端构建，当它运行时，客户端 React 库确定 DOM 应该是什么样子，在你从服务器渲染它时检查 DOM，如果它们匹配，它不需要重新渲染任何东西。（如果它们不匹配，客户端的 React 将重新渲染您的应用程序，这会破坏服务器端渲染的性能优势，因此您的应用程序在两种环境中的渲染完全相同非常重要。）您需要客户端加载端应用程序以绑定和触发事件处理程序、处理页面路由等 - 作为客户端 JS 应用程序，它的工作方式与任何其他客户端 JS 应用程序一样，无论它最初是否是服务器渲染的。

【讨论】：

【解决方案2】：

添加到@Brendan 的答案（他正确地提到了 webpack 的使用）：

SSR 的主要原因是能够发送 Html 而不是纯 JS 用于 SEO 和更快的加载时间。不过这不是强制性的，请谨慎使用，也许您不需要 SSR。
renderToString 仅发送在 Node 服务器上呈现的 html 内容，而不是您的浏览器。因此，默认情况下，它不知道正在渲染的设备、个性化（如 cookie 等）、屏幕大小等。节点上不存在窗口和文档对象。您获得的唯一好处是静态 Html。
bundle.js 是一个 JS 钩子，它将像 SPA（单页应用程序）一样呈现内容，而不管提供的静态 html 是什么。这就是使您的网站充满活力的原因。在这里，您可以执行诸如 flex wrap 之类的操作，以使网站具有响应性。这在 SSR 中是不可能的（不是开箱即用的）。

如果您刚开始使用 SSR，这篇文章可能会有所帮助： https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc。有一个简单的技巧，您可能想尝试一下，让生活变得更简单。

【讨论】：