反应服务器渲染

时间:2018-05-10 11:54:26

标签: reactjs webpack serverside-rendering

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

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

2)你需要添加

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

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

2 个答案:

答案 0 :(得分:1)

  1. 这两件事是无关的。所有renderToString所做的就是获取您的React组件呈现的内容,作为HTML字符串(而不是创建对象来表示组件并尝试将它们呈现到DOM中,就像在客户端上一样)。它返回该字符串。 React通常仅用于呈现<body>内的元素,因此通常您将根据字符串呈现根React组件的内容,然后将该字符串插入包含您的doctype的某种模板{ {1}},<html><head>元素。然后由您来让您的服务器返回构成HTML文档的这一文本字符串。

  2. 使用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应用程序一样,无论它最初是否是服务器呈现的。

答案 1 :(得分:1)

添加到@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。 有一个简单的技巧,您可能想尝试使生活更简单。