與renderToString類似功能的還有： i. renderToStaticMarkup：區(qū)別在于renderToStaticMarkup 渲染出的是不帶data-reactid的純HTML，在JavaScript加載完成后因?yàn)椴徽J(rèn)識之前服務(wù)端渲染的內(nèi)容導(dǎo)致重新渲染(可能頁面會閃一下)。

ii. renderToNodeStream：將React元素渲染為其初始HTML，返回一個(gè)輸出HTML字符串的可讀流。

iii. renderToStaticNodeStream：與renderToNodeStream此類似，除了這不會創(chuàng)建React在內(nèi)部使用的額外DOM屬性，例如data-reactroot。

(5) 使用redux 承擔(dān)數(shù)據(jù)準(zhǔn)備，狀態(tài)維護(hù)的職責(zé)，通常搭配react-redux, redux-thunk(中間件：發(fā)異步請求用到action)使用。（本猿目前使用比較多是就是Redux和Mobx，這里以Redux為例）。 A. 創(chuàng)建store(服務(wù)器每次請求都要?jiǎng)?chuàng)建一次，客戶端只創(chuàng)建一次):

const reducer = combineReducers({
 home: homeReducer,
 page1: page1Reducer,
 page2: page2Reducer
});

export const getStore = (req) => {
 return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios(req))));
}

export const getClientStore = () => {
 return createStore(reducer, window.STATE_FROM_SERVER, applyMiddleware(thunk.withExtraArgument(clientAxios)));
}

B. action: 負(fù)責(zé)把數(shù)據(jù)從應(yīng)用傳到store，是store數(shù)據(jù)的唯一來源

export const getData = () => {
 return (dispatch, getState, axiosInstance) => {
 return axiosInstance.get('interfaceUrl/xxx')
  .then((res) => {
  dispatch({
   type: 'HOME_LIST',
   list: res.list
  })
  });
 }
}

C. reducer：接收舊的state和action，返回新的state，響應(yīng)actions并發(fā)送到store。

export default (state = { list: [] }, action) => {
 switch(action.type) {
 case 'HOME_LIST':
  return {
  ...state,
  list: action.list
  }
 default:
  return state;
 }
}
export default (state = { list: [] }, action) => {
 switch(action.type) {
 case 'HOME_LIST':
  return {
  ...state,
  list: action.list
  }
 default:
  return state;
 }
}

D. 使用react-redux的connect，Provider把組件和store連接起來

Provider 將之前創(chuàng)建的store作為prop傳給Provider

const content = renderToString((
 
 
  

  {renderRoutes(routes)}
  
 
 
));

connect([mapStateToProps]，[mapDispatchToProps]，[mergeProps]， [options])接收四個(gè)參數(shù) 常用的是前兩個(gè)屬性 mapStateToProps函數(shù)允許我們將store中的數(shù)據(jù)作為props綁定到組件上mapDispatchToProps將action作為props綁定到組件上

 connect(mapStateToProps(),mapDispatchToProps())(MyComponent)

(6) 使用react-router承擔(dān)路由職責(zé) 服務(wù)端路由不同于客戶端，它是無狀態(tài)的。React 提供了一個(gè)無狀態(tài)的組件StaticRouter，向StaticRouter傳遞當(dāng)前URL，調(diào)用ReactDOMServer.renderToString() 就能匹配到路由視圖。

服務(wù)端

import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
import routes from './router.js'


{renderRoutes(routes)}

瀏覽器端

import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
import routes from './router.js'


 {renderRoutes(routes)}

當(dāng)瀏覽器的地址欄發(fā)生變化的時(shí)候，前端會去匹配路由視圖，同時(shí)由于req.path發(fā)生變化，服務(wù)端匹配到路由視圖，這樣保持了前后端路由視圖的一致，在頁面刷新時(shí)，仍然可以正常顯示當(dāng)前視圖。如果只有瀏覽器端路由，而且是采用BrowserRouter，當(dāng)頁面地址發(fā)生變化后去刷新頁面時(shí)，由于沒有對應(yīng)的HTML，會導(dǎo)致頁面找不到，但是加了服務(wù)端路由后，刷新發(fā)生時(shí)服務(wù)端會返回一個(gè)完整的html給客戶端，頁面仍然正常顯示。 推薦使用 react-router-config插件，然后如上代碼在StaticRouter和BrowserRouter標(biāo)簽的子元素里加renderRoutes(routes)：建一個(gè)router.js文件

const routes = [{ component: Root,
 routes: [
 { path: '/',
  exact: true,
  component: Home,
  loadData: Home.loadData
 },
 { path: '/child/:id',
  component: Child,
  loadData: Child.loadData
  routes: [
  path: '/child/:id/grand-child',
  component: GrandChild,
  loadData: GrandChild.loadData
  ]
 }
 ]
}];

在瀏覽器端請求一個(gè)地址的時(shí)候，server.js 里在實(shí)際渲染前可以通過matchRouters 這種方式確定要渲染的內(nèi)容，調(diào)用loaderData函數(shù)進(jìn)行action派發(fā)，返回promise->promiseAll->renderToString，最終生成HTML文檔返回。

import { matchRoutes } from 'react-router-config'
 const loadBranchData = (location) => {
 const branch = matchRoutes(routes, location.pathname)

 const promises = branch.map(({ route, match }) => {
  return route.loadData
  ? route.loadData(match)
  : Promise.resolve(null)
 })

 return Promise.all(promises)
}

(7) 寫組件注意代碼同構(gòu)(即：一套React代碼在服務(wù)端執(zhí)行一次，在客戶端再執(zhí)行一次) 由于服務(wù)器端綁定事件是無效的，所以服務(wù)器返回的只有頁面樣式(&注水的數(shù)據(jù))，同時(shí)返回JavaScript文件，在瀏覽器上下載并執(zhí)行JavaScript時(shí)才能把事件綁上，而我們希望這個(gè)過程只需編寫一次代碼，這個(gè)時(shí)候就會用到同構(gòu)，服務(wù)端渲染出樣式，在客戶端執(zhí)行時(shí)綁上事件。

優(yōu)點(diǎn)： 共用前端代碼，節(jié)省開發(fā)時(shí)間 弊端： 由于服務(wù)器端和瀏覽器環(huán)境差異，會帶來一些問題，如document等對象找不到，DOM計(jì)算報(bào)錯(cuò)，前端渲染和服務(wù)端渲染內(nèi)容不一致等；前端可以做非常復(fù)雜的請求合并和延遲處理，但為了同構(gòu)，所有這些請求都在預(yù)先拿到結(jié)果才會渲染。

以上是“基于React.js和Node.js怎么實(shí)現(xiàn)SSR”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！