Question

我想创建一个服务器端反应应用程序，我有一些疑问：

1）当你使用react-dom / server的renderToString时，你是否还需要使用webpack来构建项目，或者这样做呢？

2）你需要添加

吗？

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

到html？如果是这样，为什么？是不是renderToString已经将此文件作为字符串传递？感谢

Answer 1

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

Answer 2

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

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

如果您只是从SSR开始，本文可能会有所帮助： https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc。有一个简单的技巧，您可能想尝试使生活更简单。

反应服务器渲染

2 个答案: