React 可用于服务器端渲染.这意味着什么? [英] React can be used on server side rendering. What does that mean?

问题描述

我是 React 和 Redux 的新手.虽然我知道 React 只是一个视图层.但是我看到了一个术语React 可用于服务器端渲染".这是什么意思以及它如何在 nodejs 的幕后工作.任何人都可以帮助我弄清楚什么是反应中的服务器端渲染"这一事实.

I am new to React and Redux . Although i know that React is just a view layer . But i saw a term "React can be used on server side rendering". What does this mean and how it works behind the scene with nodejs.Can anyone help me in getting clear the fact that "What is server side render in react".

推荐答案

react-dom 包包含一个 server 模块.该模块允许您使用 reactDOMServer.renderTostring() 将您的 React 应用程序渲染为一个简单的 HTML 字符串.基本上是一组给定的 props 视图的快照:

The react-dom package includes a server module. This module allows you render your react application to a simple HTML string with reactDOMServer.renderTostring(). Basically a snapshot of your view for a given set of props:

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

此外，此函数根据它生成的字符串计算唯一的哈希值并将其附加到 html.在客户端，react 可以拾取"服务器生成的 HTML 并将其用作第一次渲染".

Additionally this functions calculates a unique hash from the string it generated and appends it to the html. On the client side react can "pick up" the server generated HTML and use it as its "first render".

虽然客户端首先渲染和服务器渲染需要产生完全相同的输出，以便在客户端接收它.React 可以通过生成的哈希来检查:客户端 react 也会生成一个 html 字符串(不修改实际 DOM，我认为这仅在虚拟 DOM 上完成).现在，它还可以从其虚拟 DOM 计算哈希值，并将其与服务器呈现的值进行比较.如果它们匹配，则不需要进行渲染.如果他们不这样做，客户端的反应将丢弃服务器生成的 DOM 并将其替换为它的版本(并打印出错误/警告).

Though the client side first render and the server render need to produce the exact same output for react to pick it up on the client side. React can check this via the generated hash: The client side react will also generate a html string (without modifying the actual DOM, I think this is done only on the virtual DOM). Now it can also calculate a hash from its virtual DOM and compare it with the server rendered one. If they match, no rendering needs be done. If they don't, the client side react will throw away the server generated DOM and replace it with its version (and print out an error/warning).

结合 redux 这意味着除了呈现 HTML 之外，您还需要将商店的状态 (store.getState()) 传递给客户端.然后，客户端可以在创建其 Redux 存储实例时使用此序列化状态作为初始状态.这将导致两个渲染(客户端 + 服务器)匹配.

In combination with redux this means in addition to rendering the HTML you need to pass down the state of your store (store.getState()) to the client. The client can then use this serialized state as an initial state when creating its instance of the redux store. This will lead to both renders (client + server) to match up.

如果你不需要客户端做任何事情而只想在服务器端创建静态标记，react-dom 提供了一个 renderToStaticMarkup() 函数:

If you don't need the client side to do anything and just want to create static markup on the server side, react-dom offers a renderToStaticMarkup() function:

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup

这篇关于React 可用于服务器端渲染.这意味着什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！