<b>本文講的是[譯] React 在服務端渲染的實作，</b>
<b></b>
React是最受歡迎的用戶端 JavaScript 架構，但你知道嗎(或許更應該試試)，你可以使用 React 在伺服器端進行渲染？
假設你為客戶建構了一個很棒的事件清單 React app。。該應用程式使用了您最喜歡的伺服器端工具建構的API。幾周後，使用者告訴您，他們的頁面沒有顯示在 Google 上，釋出到 Facebook 時也顯示不出來。 這些問題似乎是可以解決的，對吧？
您會發現，要解決這個問題，需要在初始加載時從伺服器渲染 React 頁面，以便來自搜尋引擎和社交媒體網站的爬蟲工具可以讀取您的标記。有證據表明，Google 有時會執行 javascript 程式并且對生成的内容進行索引，但并不總是這樣。是以，如果您希望確定與其他服務（如 Facebook、Twitter）有良好的 SEO 相容性，那麼始終建議使用伺服器端渲染。
在本教程中，我們将逐漸介紹伺服器端的呈現示例。包括圍繞與 API 交流的 React 應用程式的共同路障。
在本教程中，我們将逐漸向您介紹伺服器端的渲染示例。包括圍繞着 APIS 交流一些在服務端渲染 React 應用程式的共同障礙。
可能您的團隊談論到服務端渲染的好處是首先會想到 SEO，但這并不是唯一的潛在好處。
更大的好處如下：伺服器端渲染能更快地顯示頁面。使用伺服器端渲染，您的伺服器對浏覽器進行響應是在您的 HTML 頁面可以渲染的時候，是以浏覽器可以不用等待所有的 JavaScript 被下載下傳和執行就可以開始渲染。當浏覽器下載下傳并執行頁面所需的 JavaScript 和其他資源時，不會出現 “白屏” 現象，而 “白屏” 卻可能在完全由用戶端渲染的 React 網站中出現。
啟動器代碼中包含以下内容：
package.json - 依賴項
Webpack 和 Babel 配置
index.html - app 的 HTML 檔案
index.js - 加載 React 并渲染 Hello 元件
要使應用運作，請先克隆資源庫：
安裝依賴:
然後啟動伺服器:
如果您檢視渲染頁面的源代碼，您将看到發送到浏覽器的标記隻是一個到 JavaScript 檔案的連結。這意味着頁面的内容不能保證被搜尋引擎和社交媒體平台抓取:
開始前，讓我們安裝 Express，一個 Node.js 的伺服器端應用程式架構：
我們要建立一個渲染我們的 React 元件的伺服器：
讓我們分解下程式看看發生了什麼事情...
這将傳回 Hello 元件的 HTML，我們将其注入到 index.html 的 HTML 中，進而生成伺服器上頁面的完整 HTML。
要啟動伺服器，請更新 `package.json` 中的起始腳本，然後運作 <code>npm run start</code> :
浏覽 <code>http://localhost:3000</code> 檢視應用程式。瞧！您的頁面現在正在從伺服器渲染出來了。但是有個問題，
如果您在浏覽器中檢視頁面源碼，您會注意到部落格文章仍未包含在響應中。這是怎麼回事？如果我們在 Chrome 中打開網絡面闆，我們會看到用戶端上發生 API 請求。
React Transmit 給了我們優雅的包裝器元件（通常稱為“高階元件”），用于擷取在用戶端和伺服器上工作的資料。
這是我們使用 react-transmit 後的元件的代碼：
我們已經使用 <code>Transmit.createContainer</code> 将我們的元件包裝在一個進階元件中，該元件可以用來擷取資料。我們在 React 元件中删除了生命周期方法，因為無需兩次擷取資料。同時我們把 render 方法中的 state 替換成 props，因為 React Transmit 将資料作為 props 傳遞給元件。
為了確定伺服器在渲染之前擷取資料，我們導入 Transmit 并使用 <code>Transmit.renderToString</code> 而不是 <code>ReactDOM.renderToString</code> 方法
重新啟動伺服器浏覽到 <code>http://localhost：3000</code>。檢視頁面源代碼，您将看到該頁面現在完全呈現在伺服器上！
<b>原文釋出時間為：2017年7月4日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>