（十分鐘視頻教程）nodejs基礎實戰教程3：react服務端渲染入門篇

視頻截圖以下：

 

（具體視頻見文末）

前言：

這是小貓的第三篇node教程，本篇內容是由公衆號粉絲票選得出的，相信你們對這篇教程是抱有較大但願的，這篇教程由小貓和一位多年的好朋友合做完成（筆名：穀雨，博客地址：https://segmentfault.com/u/1024dylan），也是ssr的啓蒙教程，適合剛剛入門node，而且有必定react開發經驗的同窗，但願能給你們帶來一份收穫哦。

小貓教程特點，就是每一個知識點都以實戰例子講解，配以視頻，長度十分鐘左右。讓你很快上手，帶有成就感的初探技術新領域哦。

（視頻審覈剛過，昨天的教程姍姍來遲）

本篇將使用的新技術點介紹：

 

react-dom/server模塊：

ReactDOMServer 對象使你可以將組件渲染爲靜態標記。 一般，它在 Node 服務器上使用：

 

renderToString：

將 React 元素渲染到其初始 HTML 中。 該函數應該只在服務器上使用。 React 將返回一個 HTML 字符串。 您可使用此方法在服務器上生成 HTML ，並在初始請求時發送標記，以加快網頁加載速度，並容許搜索引擎抓取你的網頁以實現 SEO 目的。

 

若是在已經具備此服務器渲染標記的節點上調用 ReactDOM.hydrate() ，React 將保留它，而且只附加事件處理程序，從而使您擁有很是高性能的第一次加載體驗

 

renderToStaticMarkup:

似於 renderToString ，除了這不會建立 React 在內部使用的額外DOM屬性，如 data-reactroot。 若是你想使用React 做爲一個簡單的靜態頁面生成器，這頗有用，由於剝離額外的屬性能夠節省一些字節。

 

ReactDom.hydrate:

與 render() 相同，但用於混合容器，該容器的HTML內容是由 ReactDOMServer 渲染的。 React 將嘗試將事件監聽器附加到現有的標記。

 

babel&webpack：

react 和 es6 語法編譯識別，這裏就不作詳細介紹了。具體用到的插件和模塊能夠看代碼。

 

 

思路：

1.搭建node服務，並輸出頁面html主框架。

 

2.將現有react代碼進行服務端渲染的改造;

首先要識別瀏覽器和服務端環境，運行不一樣分支;

render方法改形成hydrate。

 

3.引入babel使node環境支持import和jsx語法，配置webpack生成瀏覽器中運行的js

 

webpack配置：

 

package.json 配置：

 

 

tips：

1.到了瀏覽器端渲染的時候可不能夠用render？

能夠，不推薦。

理由：

react 官方文檔中提到：

 

若是使用render，會致使服務端渲染好的dom結構，在瀏覽器第一次運行render的時候被從新替換，浪費性能。故應該使用爲服務端渲染而提出的hydrate方法（react 16版本提出）。

該方法能夠只將事件監聽器附加到現有的標記，而不進行dom的從新替換等。

 

2.服務端渲染的好處：

seo和首屏優化，且在使用hydrate方法的時候，減小了react初始化的渲染時間等。

 

3.服務端渲染一個重要的注意事項：

window和document 在服務端時是不存在的，相關操做都要移動到compentDidMount中進行。

 

視頻：

 https://v.qq.com/x/page/i0652gap4pe.html

 

後記：

好了，今天的內容到這裏啦，怎麼樣你有收穫麼？期待關注後續內容哦，若是感受有收穫記得分享給身邊的同窗哦～

最後仍是下一篇文章的內容投票～小貓決定專一於node教程了，跟着小貓從0基礎成長爲全棧工程師吧，小貓堅信堅持專一就是勝利～

(ps:下週小貓會去北京參加wot，可能沒空出教程了，不要取消關注哦，下下週會出下一篇的～)