react服務端渲染如何將數據同步到客戶端？

1、react服務端渲染的原理是服務端完成渲染之後，JS在客戶端再次執行時發現已經存在相同的元素，所以不會再次渲染

2、比如說這樣一個場景，訪問某個地址時，服務端先請求介面獲得數據然後傳給react組件，然後renderToString再插到頁面中，返回頁面，但是JS在客戶端再次執行時是沒有這些數據的，所以會將前面服務端根據數據生成的這些元素刪掉，這個問題怎麼解決啊，求助大神

---

伺服器端渲染的是整個app的最頂層的component，將會生成HTML字元，然後

&&&&『這裡放渲染好的組件』&window.initDataNameSpace={你的數據}&&& 客戶端讀取這個initDataNameSpace就好了呀，這裡可以是state數據，第一次客戶端載入的時候，將這個state保存下來，同時在最頂層的那個react.render()里判斷一下，第一次就不要render了因為伺服器已經生成好了

serverside render 主要目的是為了SEO優化，只針對機器人就好了，對於普通用戶沒有必要進行伺服器端渲染，只作為API伺服器性能會好很多

---

1. 客戶端還是要需要render, 會觸發component 的componentDidMounted(伺服器端不會)， 和綁定事件

2. React 的component 本質上是一個state machine, 如果你要保證客戶端和伺服器端渲染出同樣的結果， 你必須保證客戶端和伺服器端可以訪問到同樣的State

簡單來說，當你在伺服器端獲得一些數據，你必須把這些數據傳遞到客戶端， 通常是把這些數據serialize 了， 然後嵌入到返回的HTML中。 客戶端deserialize後再render React component

如果你用Flux 的話， 就是要把Store同步到客戶端去。

很多Flux Lib都會有類似的util, 像

goatslacker/iso · GitHub （原本是for Alt的， 但是是一個通用的lib, 適用於其他flux lib 或non-flux）

---

export default function routerHandle(req,res,next,html="index",src,css,title)
{
//創建歷史記錄
const memortHistory = createMemoryHistory(req.url);
//數據源
const store = configureStore(memortHistory);
const state = store.getState();
//hostory
const history = syncHistoryWithStore(memortHistory,store);
//react 服務段渲染
match({history,routes,location:req.url},(error,redirectLocation,renderProps)=&>{
if (error) {
res.status(500).send(error.message);
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if (renderProps) {
const content = renderToString(
&
&
&
);
res.send(renderFullPage(content,src,css,state));
next();
}
});
}
function renderFullPage(html, js ,css ,initialState) {
return `
&
&
&
&Redux Universal Example&
& &
&
&${html}& &
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
&
&

---

GitHub - bodyno/universal-react-starter-kit: 服務端渲染的React手腳架。完美使用 React, Redux, and React-Router！最好用的腳手架

在Nodejs層發送ajax把結果調過來然後展示就好了

可以看看我這個剛做的腳手架

希望可以幫到你

---

今天剛剛嘗試為一個web項目增加服務端渲染功能，參考了這個github上的項目GitHub - davezuko/react-redux-starter-kit: Get started with React, Redux, and React-Router!

這個項目的state管理使用了redux，將所有的state放入store中，在返回頁面中執行window.store={服務端所渲染的store}，然後在客戶端將這個store取出並初始化，實現store的同步。

---

推薦閱讀：