React對(duì)服務(wù)端進(jìn)行渲染改造

因?yàn)閷?duì)網(wǎng)頁(yè)SEO的需要，要把之前的React項(xiàng)目改造為服務(wù)端渲染，經(jīng)過(guò)一番調(diào)查和研究，查閱了大量互聯(lián)網(wǎng)資料。成功踩坑。

選型思路：實(shí)現(xiàn)服務(wù)端渲染，想用React最新的版本，并且不對(duì)現(xiàn)有的寫法做大的改動(dòng)，如果一開(kāi)始就打算服務(wù)端渲染，建議直接用NEXT框架來(lái)寫

項(xiàng)目地址：https://github.com/wlx200510/react_koa_ssr

腳手架選型：webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x

主要心得：對(duì)React的相關(guān)知識(shí)更加熟悉，成功拓展自己的技術(shù)領(lǐng)域，對(duì)服務(wù)端技術(shù)在實(shí)際項(xiàng)目上有所積累

注意點(diǎn)：使用框架前一定確認(rèn)當(dāng)前webpack版本為3.x Node為8.x以上，讀者最好用React在3個(gè)月以上，并有實(shí)際React項(xiàng)目經(jīng)驗(yàn)

項(xiàng)目目錄介紹

├── assets
│ └── index.css //放置一些全局的資源文件 可以是js 圖片等
├── config
│ ├── webpack.config.dev.js 開(kāi)發(fā)環(huán)境webpack打包設(shè)置
│ └── webpack.config.prod.js 生產(chǎn)環(huán)境webpack打包設(shè)置
├── package.json
├── README.md
├── server server端渲染文件，如果對(duì)不是很了解，建議參考[koa教程](http://wlxadyl.cn/2018/02/11/koa-learn/)
│ ├── app.js
│ ├── clientRouter.js // 在此文件中包含了把服務(wù)端路由匹配到react路由的邏輯
│ ├── ignore.js
│ └── index.js
└── src
 ├── app 此文件夾下主要用于放置瀏覽器和服務(wù)端通用邏輯
 │ ├── configureStore.js //redux-thunk設(shè)置
 │ ├── createApp.js //根據(jù)渲染環(huán)境不同來(lái)設(shè)置不同的router模式
 │ ├── index.js
 │ └── router
 │ ├── index.js
 │ └── routes.js //路由配置文件！ 重要
 ├── assets
 │ ├── css 放置一些公共的樣式文件
 │ │ ├── _base.scss //很多項(xiàng)目都會(huì)用到的初始化css
 │ │ ├── index.scss
 │ │ └── my.scss
 │ └── img
 ├── components 放置一些公共的組件
 │ ├── FloatDownloadBtn 公共組件樣例寫法
 │ │ ├── FloatDownloadBtn.js
 │ │ ├── FloatDownloadBtn.scss
 │ │ └── index.js
 │ ├── Loading.js
 │ └── Model.js 函數(shù)式組件的寫法
 │
 ├── favicon.ico
 ├── index.ejs //渲染的模板 如果項(xiàng)目需要，可以放一些公共文件進(jìn)去
 ├── index.js //包括熱更新的邏輯
 ├── pages 頁(yè)面組件文件夾
 │ ├── home
 │ │ ├── components // 用于放置頁(yè)面組件，主要邏輯
 │ │ │ └── homePage.js
 │ │ ├── containers // 使用connect來(lái)封裝出高階組件 注入全局state數(shù)據(jù)
 │ │ │ └── homeContainer.js
 │ │ ├── index.js // 頁(yè)面路由配置文件 注意thunk屬性
 │ │ └── reducer
 │ │ └── index.js // 頁(yè)面的reducer 這里暴露出來(lái)給store統(tǒng)一處理 注意寫法
 │ └── user
 │ ├── components
 │ │ └── userPage.js
 │ ├── containers
 │ │ └── userContainer.js
 │ └── index.js
 └── store
 ├── actions // 各action存放地
 │ ├── home.js
 │ └── thunk.js
 ├── constants.js // 各action名稱匯集處 防止重名
 └── reducers
 └── index.js // 引用各頁(yè)面的所有reducer 在此處統(tǒng)一combine處理

項(xiàng)目的構(gòu)建思路

1. 本地開(kāi)發(fā)使用webpack-dev-server，實(shí)現(xiàn)熱更新，基本流程跟之前react開(kāi)發(fā)類似，仍是瀏覽器端渲染，因此在編寫代碼時(shí)要考慮到一套邏輯，兩種渲染環(huán)境的問(wèn)題。

2. 當(dāng)前端頁(yè)面渲染完成后，其Router跳轉(zhuǎn)將不會(huì)對(duì)服務(wù)端進(jìn)行請(qǐng)求，從而減輕服務(wù)端壓力，從而頁(yè)面的進(jìn)入方式也是兩種，還要考慮兩種渲染環(huán)境下路由同構(gòu)的問(wèn)題。

3. 生產(chǎn)環(huán)境要使用koa做后端服務(wù)器，實(shí)現(xiàn)按需加載，在服務(wù)端獲取數(shù)據(jù)，并渲染出整個(gè)HTML，利用React16最新的能力來(lái)合并整個(gè)狀態(tài)樹(shù)，實(shí)現(xiàn)服務(wù)端渲染。

本地開(kāi)發(fā)介紹

查看本地開(kāi)發(fā)主要涉及的文件是src目錄下的index.js文件，判斷當(dāng)前的運(yùn)行環(huán)境，只有在開(kāi)發(fā)環(huán)境下才會(huì)使用module.hot的API，實(shí)現(xiàn)當(dāng)reducer發(fā)生變化時(shí)的頁(yè)面渲染更新通知，注意其中的hydrate方法，這是v16版本的一個(gè)專門為服務(wù)端渲染新增的API方法，它在render方法的基礎(chǔ)上實(shí)現(xiàn)了對(duì)服務(wù)端渲染內(nèi)容的最大可能重用，實(shí)現(xiàn)了靜態(tài)DOM到動(dòng)態(tài)NODES的過(guò)程。實(shí)質(zhì)是代替了v15版本下判斷checksum標(biāo)記的過(guò)程，使得重用的過(guò)程更加高效優(yōu)雅。

const renderApp=()=>{
 let application=createApp({store,history});
 hydrate(application,document.getElementById('root'));
}
window.main = () => {
 Loadable.preloadReady().then(() => {
 renderApp()
 });
};
if(process.env.NODE_ENV==='development'){
 if(module.hot){
 module.hot.accept('./store/reducers/index.js',()=>{
 let newReducer=require('./store/reducers/index.js');
 store.replaceReducer(newReducer)
 })
 module.hot.accept('./app/index.js',()=>{
 let {createApp}=require('./app/index.js');
 let newReducer=require('./store/reducers/index.js');
 store.replaceReducer(newReducer)
 let application=createApp({store,history});
 hydrate(application,document.getElementById('root'));
 })
 }
}

注意window.main這個(gè)函數(shù)的定義，結(jié)合index.ejs可以知道這個(gè)函數(shù)是所有腳本加載完成后才觸發(fā)，里面用的是react-loadable的寫法，用于頁(yè)面的懶加載，關(guān)于頁(yè)面分別打包的寫法要結(jié)合路由設(shè)置來(lái)講解，這里有個(gè)大致印象即可。需要注意的是app這個(gè)文件下暴露出的三個(gè)方法是在瀏覽器端和服務(wù)器端通用的，接下來(lái)主要就是說(shuō)這部分的思路。

路由處理

接下來(lái)看以下src/app目錄下的文件，index.js暴露了三個(gè)方法，這里面涉及的三個(gè)方法在服務(wù)端和瀏覽器端開(kāi)發(fā)都會(huì)用到，這一部分主要講其下的router文件里面的代碼思路和createApp.js文件對(duì)路由的處理，這里是實(shí)現(xiàn)兩端路由相互打通的關(guān)鍵點(diǎn)。

router文件夾下的routes.js是路由配置文件，將各個(gè)頁(yè)面下的路由配置都引進(jìn)來(lái)，合成一個(gè)配置數(shù)組，可以通過(guò)這個(gè)配置來(lái)靈活控制頁(yè)面上下線。同目錄下的index.js是RouterV4的標(biāo)準(zhǔn)寫法，通過(guò)遍歷配置數(shù)組的方式傳入路由配置，ConnectRouter是用于合并Router的一個(gè)組件，注意到history要作為參數(shù)傳入，需要在createApp.js文件里做單獨(dú)的處理。先大致看一下Route組件中的幾個(gè)配置項(xiàng)，值得注意的是其中的thunk屬性，這是實(shí)現(xiàn)后端獲取數(shù)據(jù)后渲染的關(guān)鍵一步，正是這個(gè)屬性實(shí)現(xiàn)了類似Next里面的組件提前獲取數(shù)據(jù)的生命周期鉤子，其余的屬性都可以在相關(guān)React-router文檔中找到說(shuō)明，這里不在贅述。

import routesConfig from './routes';
const Routers=({history})=>(
 <ConnectedRouter history={history}>
 <p>
 {
 routesConfig.map(route=>(
 <Route key={route.path} exact={route.exact} path={route.path} component={route.component} thunk={route.thunk} />
 ))
 }
 </p>
 </ConnectedRouter>
)
export default Routers;

查看app目錄下的createApp.js里面的代碼可以發(fā)現(xiàn)，本框架是針對(duì)不同的工作環(huán)境做了不同的處理，只有在生產(chǎn)環(huán)境下才利用Loadable.Capture方法實(shí)現(xiàn)了懶加載，動(dòng)態(tài)引入不同頁(yè)面對(duì)應(yīng)的打包之后的js文件。到這里還要看一下組件里面的路由配置文件的寫法，以home頁(yè)面下的index.js為例。注意/* webpackChunkName: 'Home' */這串字符，實(shí)質(zhì)是指定了打包后此頁(yè)面對(duì)應(yīng)的js文件名，所以針對(duì)不同的頁(yè)面，這個(gè)注釋也需要修改，避免打包到一起。loading這個(gè)配置項(xiàng)只會(huì)在開(kāi)發(fā)環(huán)境生效，當(dāng)頁(yè)面加載未完成前顯示，這個(gè)實(shí)際項(xiàng)目開(kāi)發(fā)如果不需要可以刪除此組件。

import {homeThunk} from '../../store/actions/thunk';
const LoadableHome = Loadable({
 loader: () =>import(/* webpackChunkName: 'Home' */'./containers/homeContainer.js'),
 loading: Loading,
});
const HomeRouter = {
 path: '/',
 exact: true,
 component: LoadableHome,
 thunk: homeThunk // 服務(wù)端渲染會(huì)開(kāi)啟并執(zhí)行這個(gè)action，用于獲取頁(yè)面渲染所需數(shù)據(jù)
}
export default HomeRouter

這里多說(shuō)一句，有時(shí)我們要改造的項(xiàng)目的頁(yè)面文件里有從window.location里面獲取參數(shù)的代碼，改造成服務(wù)端渲染時(shí)要全部去掉，或者是要在render之后的生命周期中使用。并且頁(yè)面級(jí)別組件都已經(jīng)注入了相關(guān)路由信息，可以通過(guò)this.props.location來(lái)獲取URL里面的參數(shù)。本項(xiàng)目用的是BrowserRouter，如果用HashRouter則包含參數(shù)可能略有不同，根據(jù)實(shí)際情況取用。

根據(jù)React16的服務(wù)端渲染的API介紹：

1. 瀏覽器端使用的注入ConnectedRouter中的history為：import createHistory from 'history/createBrowserHistory'

2. 服務(wù)器端使用的history為import createHistory from 'history/createMemoryHistory'

服務(wù)端渲染

這里就不會(huì)涉及到koa2的一些基礎(chǔ)知識(shí)，如果對(duì)koa2框架不熟悉可以參考我的另外一篇博文。這里是看server文件夾下都是服務(wù)端的代碼。首先是簡(jiǎn)潔的app.js用于保證每次連接都返回的是一個(gè)新的服務(wù)器端實(shí)例，這對(duì)于單線程的js語(yǔ)言是很關(guān)鍵的思路。需要重點(diǎn)介紹的就是clientRouter.js這個(gè)文件，結(jié)合/src/app/configureStore.js這個(gè)文件共同理解服務(wù)端渲染的數(shù)據(jù)獲取流程和React的渲染機(jī)制。

/*configureStore.js*/
import {createStore, applyMiddleware,compose} from "redux";
import thunkMiddleware from "redux-thunk";
import createHistory from 'history/createMemoryHistory';
import { routerReducer, routerMiddleware } from 'react-router-redux'
import rootReducer from '../store/reducers/index.js';
const routerReducers=routerMiddleware(createHistory());//路由
const composeEnhancers = process.env.NODE_ENV=='development'?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
const middleware=[thunkMiddleware,routerReducers]; //把路由注入到reducer，可以從reducer中直接獲取路由信息
let configureStore=(initialState)=>createStore(rootReducer,initialState,composeEnhancers(applyMiddleware(...middleware)));
export default configureStore;

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__這個(gè)變量是瀏覽器里面的Redux的開(kāi)發(fā)者工具，開(kāi)發(fā)React-redux應(yīng)用時(shí)建議安裝，否則會(huì)有報(bào)錯(cuò)提示。這里面大部分都是redux-thunk的示例代碼，關(guān)于這部分如果看不懂建議看一下redux-thunk的官方文檔，這里要注意的是configureStore這個(gè)方法要傳入的initialState參數(shù)，這個(gè)渲染的具體思路是：在服務(wù)端判斷路由的thunk方法，如果存在則需要執(zhí)行這個(gè)獲取數(shù)據(jù)邏輯，這是個(gè)阻塞過(guò)程，可以當(dāng)作同步，獲取后放到全局State中，在前端輸出的HTML中注入window.__INITIAL_STATE__這個(gè)全局變量，當(dāng)html載入完畢后，這個(gè)變量賦值已有數(shù)據(jù)的全局State作為initState提供給react應(yīng)用，然后瀏覽器端的js加載完畢后會(huì)通過(guò)復(fù)用頁(yè)面上已有的dom和初始的initState作為開(kāi)始，合并到render后的生命周期中，從而在componentDidMount中已經(jīng)可以從this.props中獲取渲染所需數(shù)據(jù)。

但還要考慮到頁(yè)面切換也有可能在前端執(zhí)行跳轉(zhuǎn)，此時(shí)作為React的應(yīng)用不會(huì)觸發(fā)對(duì)后端的請(qǐng)求，因此在componentDidMount這個(gè)生命周期里并沒(méi)有獲取數(shù)據(jù)，為了解決這個(gè)問(wèn)題，我建議在這個(gè)生命周期中都調(diào)用props中傳來(lái)的action觸發(fā)函數(shù)，但在action內(nèi)部進(jìn)行一層邏輯判斷，避免重復(fù)的請(qǐng)求，實(shí)際項(xiàng)目中請(qǐng)求數(shù)據(jù)往往會(huì)有個(gè)標(biāo)識(shí)性ID，就可以將這個(gè)ID存入store中，然后就可以進(jìn)行一次對(duì)比校驗(yàn)來(lái)提前返回，避免重復(fù)發(fā)送ajax請(qǐng)求，具體可看store/actions/home.js`中的邏輯處理。

import {ADD,GET_HOME_INFO} from '../constants'
export const add=(count)=>({type: ADD, count,})
export const getHomeInfo=(sendId=1)=>async(dispatch,getState)=>{
 let {name,age,id}=getState().HomeReducer.homeInfo;
 if (id === sendId) {
 return //是通過(guò)對(duì)請(qǐng)求id和已有數(shù)據(jù)的標(biāo)識(shí)性id進(jìn)行對(duì)比校驗(yàn)，避免重復(fù)獲取數(shù)據(jù)。
 }
 console.log('footer'.includes('foo'))
 await new Promise(resolve=>{
 let homeInfo={name:'wd2010',age:'25',id:sendId}
 console.log('-----------請(qǐng)求getHomeInfo')
 setTimeout(()=>resolve(homeInfo),1000)
 }).then(homeInfo=>{
 dispatch({type:GET_HOME_INFO,data:{homeInfo}})
 })
}

注意這里的async/await寫法，這里涉及到服務(wù)端koa2使用這個(gè)來(lái)做數(shù)據(jù)請(qǐng)求，因此需要統(tǒng)一返回async函數(shù)，這塊不熟的同學(xué)建議看下ES7的知識(shí)，主要是async如何配合Promise實(shí)現(xiàn)異步流程改造，并且如果涉及koa2的服務(wù)端工作，對(duì)async函數(shù)用的更多，這也是本項(xiàng)目要求Node版本為8.x以上的原因，從8開(kāi)始就可以直接用這兩個(gè)關(guān)鍵字。

不過(guò)到具體項(xiàng)目中，往往會(huì)涉及到一些服務(wù)端參數(shù)的注入問(wèn)題，但這塊根據(jù)不同項(xiàng)目需求差異很大，并且不屬于這個(gè)React服務(wù)端改造的一部分，沒(méi)法統(tǒng)一分享，如果真是公司項(xiàng)目要用到對(duì)這塊有需求咨詢可以打賞后加我微信討論。

以Home頁(yè)面為例的渲染流程

為了方便大家理解，我以一個(gè)頁(yè)面為例整理了一下數(shù)據(jù)流的整體過(guò)程，看一下思路：

1. 服務(wù)端接收到請(qǐng)求，通過(guò)/home找到對(duì)應(yīng)的路由配置

2. 判斷路由存在thunk方法，此時(shí)執(zhí)行store/actions/thunk.js里面的暴露出的函數(shù)

3. 異步獲取的數(shù)據(jù)會(huì)注入到全局state中，此時(shí)的dispatch分發(fā)其實(shí)并不生效

4. 要輸出的HTML代碼中會(huì)將獲取到數(shù)據(jù)后的全局state放到window.__INITIAL_STATE__這個(gè)全局變量中，作為initState

5. window.__INITIAL_STATE__將在react生命周期起作用前合并入全局state，此時(shí)react發(fā)現(xiàn)dom已經(jīng)生成，不會(huì)再次觸發(fā)render，并且數(shù)據(jù)狀態(tài)得到同步

服務(wù)端直出HTML

基本的流程已經(jīng)介紹結(jié)束，至于一些Reducer的函數(shù)式寫法，還有actions的位置都是參考網(wǎng)上的一些分析來(lái)組織的，具體見(jiàn)仁見(jiàn)智，這個(gè)只要符合自己的理解，并且有助于團(tuán)隊(duì)開(kāi)發(fā)就好。如果您符合我在文章一開(kāi)始設(shè)定的讀者背景，相信本文的講述足夠您點(diǎn)亮自己的服務(wù)端渲染技術(shù)點(diǎn)啦。如果對(duì)React了解偏少也沒(méi)關(guān)系，可以參考這里來(lái)補(bǔ)充一些React的基礎(chǔ)知識(shí)

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何使用webpack+vue環(huán)境局域網(wǎng)

vue底層原理與組件通信

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com