React 服务端渲染render

ReactDOMServer.renderToString(element)

如果你在已有服务端渲染标记的节点上调用 ReactDOM.hydrate() 方法,React 将会保留该节点且只进行事件处理绑定,从而让你有一个非常高性能的首次加载体验

renderToStaticMarkup()

此方法与 renderToString 相似,但此方法不会在 React 内部创建的额外 DOM 属性,例如 data-reactroot。

ReactDOMServer.renderToNodeStream(element)

将一个 React 元素渲染成其初始 HTML。返回一个可输出 HTML 字符串的可读流。通过可读流输出的 HTML 完全等同于 ReactDOMServer.renderToString 返回的 HTML。达到 SEO 优化的目的

注意:
这个 API 仅允许在服务端使用。不允许在浏览器使用。
通过本方法返回的流会返回一个由 utf-8 编码的字节流。如果你需要另一种编码的流,请查看像 iconv-lite 这样的项目,它为转换文本提供了转换流。

ReactDOMServer.renderToStaticNodeStream(element)

类似 renderToStaticMarkup

ReactDOM.hydrate(element, container[, callback])

与 render() 相同,但它用于在 ReactDOMServer 渲染的容器中对 HTML 的内容进行 hydrate 操作。React 会尝试在已有标记上绑定事件监听器。

防止 XSS vulnerability

serialize 代替 JSON.stringify(initialData)

import serialize from 'serialize-javascript';

 window.__INITIAL_STATE__ = ${serialize(initialData)};

Leave a Reply

Your email address will not be published. Required fields are marked *