ReactDOMServer
ReactDOMServer
object 使你能將 component render 至靜態標記。它通常是用在 Node 伺服器上:
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');
概觀
以下的方法在伺服器與瀏覽器兩種環境內都能被使用:
以下這些額外的方法需要一個只能在伺服器端使用的package (stream
),它們無法在瀏覽器端被使用。
參考
renderToString()
ReactDOMServer.renderToString(element)
這個方法將一個 React element render 至其初始的 HTML。React 將會回傳一個 HTML string。你可以使用這個方法在伺服器端產生 HTML,並在初次請求時傳遞 markup,以加快頁面載入速度,並讓搜尋引擎爬取你的頁面以達到 SEO 最佳化的效果。
如果你在一個已經有伺服器端 render markup 的 node 上呼叫 ReactDOM.hydrate()
,React 將會保留這個 node 並只附上事件處理,這使你能有一個高效能的初次載入體驗。
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)
這個方法和 renderToString
很相似,不過這個方法不會建立那些額外 React 內部使用的 DOM attribute,像是 data-reactroot
。這個方法在你想要用 React 作為一個簡單的靜態頁面生成器時很有用,因為去除一些額外的 attribute 可以省去一些位元組。
如果你打算在前端使用 React 以使得 markup 有互動性的話,請不要使用這個方法。請在伺服器端使用 renderToString
,並在前端使用 ReactDOM.hydrate()
。
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)
這個方法會將一個 React element render 至其初始的 HTML。它會回傳一個 Readable Stream並輸出為一個 HTML string。通過 Readable Stream 輸出的 HTML 和 ReactDOMServer.renderToString
回傳的 HTML 完全相同。你可以使用這個方法在伺服器端產生 HTML,並在初次請求時傳遞 markup ,以加快頁面載入速度,並讓搜尋引擎爬取你的頁面以達到 SEO 最佳化的效果。
如果你在一個已經有伺服器端 render markup 的 node 上呼叫 ReactDOM.hydrate()
,React 將會保留這個 node 並只附上事件處理,這使你能有一個高效能的初次載入體驗。
注意:
這個 API 只在伺服器端有用。你無法在瀏覽器中使用此 API。
這個方法回傳的 stream 將會回傳一個由 utf-8 編碼的 byte stream。 如果你需要另一種編碼的 stream,請參考像是 iconv-lite 這種為轉換文本提供轉換 stream 的專案。
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)
這個方法和 renderToNodeStream
很相似,不過這個方法不會建立那些額外 React 內部使用的 DOM attribute,像是 data-reactroot
。這個方法在你想要用 React 作為一個簡單的靜態頁面生成器時很有用,因為去除一些額外的 attribute 可以省去一些位元組。
通過這個 stream 輸出的 HTML 和 ReactDOMServer.renderToStaticMarkup
回傳的 HTML 完全相同。
如果你打算在前端使用 React 以使得 markup 有互動性的話,請不要使用這個方法。請在伺服器端使用 renderToNodeStream
並在前端使用 ReactDOM.hydrate()
。
注意:
這個 API 只在伺服器端使用。你無法在瀏覽器中使用此 API。
這個方法回傳的 stream 將會回傳一個由 utf-8 編碼的 byte stream。 如果你需要另一種編碼的 stream,請參考像是 iconv-lite 這種為轉換文本提供轉換 stream 的專案。