React Redux服務器端再渲染客戶端

我創建了服務器端渲染的方法在redux的official site中描述的方法，一切都很好，但在客戶端再次渲染組件，這不是我認爲的好。我將服務器的相同狀態傳遞給window.__STATE__變量，並將其作爲初始狀態傳遞給我的客戶端createStore方法，但它再次重新渲染。如果需要，也請在註釋中寫下哪些代碼部分是需要的。我不提供，因爲它是非常相似的官方頁面指令代碼，並沒有錯誤，只是問題重新渲染，但據我所知它沒有連接到虛擬DOM。React Redux服務器端再渲染客戶端

請幫我找到處理這個任務的有效方法。

來源

2017-02-05 Aren Hovsepyan

看看從ReactGo項目這個例子：https://github.com/reactGo/reactGo/blob/master/app/client.jsx#L22

他們使用的功能onUpdate具有條件

if (window.__INITIAL_STATE__ !== null) { 
    window.__INITIAL_STATE__ = null; 
    return; 
    }

防止如果__INITIAL_STATE__已經定義的重複獲取。您的組件重新渲染可能與重複抓取有關。

來源

2017-02-07 21:07:08

也許我不明白你的意思是重新渲染，但它應該在客戶端上重新渲染。同構作品的方式是在服務器上呈現HTML，然後有效載荷包含初始狀態以及HTML標記 - 這樣瀏覽器「顯示」出現了更快的頁面加載時間 - 因爲甚至在之前渲染UI該腳本被執行。現在，一旦HTML解析和腳本運行，React內部構建虛擬DOM，然後將其與服務器生成的DOM進行比較，並連接事件監聽器等。但是，它不會完全重新呈現，因爲沒有新的DOM元素應該被創建。如果由於任何原因客戶端運行您的React渲染導致生成與生成的服務器DOM不同的虛擬DOM，則React將給您一個警告。

「警告：反應企圖在一個容器重複使用的標記，但校驗是無效的這通常意味着你正在使用服務器渲染和服務器上生成的標記沒有什麼客戶期待。反應注入了新的標記，以彌補其的作品，但你已經失去了很多的服務器渲染的好處相反，弄清楚爲什麼被生成的標記是客戶端或服務器上的不同：」

來源

2017-02-07 21:16:57

嗨，與重 - 我的意思是說它沒有檢查VirtualDOM用於區分，但是再次渲染整個頁面。也反應不給我警告，我會檢查也許我的根組件連接到'redux'，這就是爲什麼它重新呈現整個頁面。 –

React Redux服務器端再渲染客戶端

回答

相關問題