前一篇主要記錄了一下SSR配置以及結(jié)合Redux的使用。愛掏網(wǎng) - it200.com這里簡(jiǎn)單說一下React SSR中樣式處理和更優(yōu)雅的SEO
SSR樣式
在React客戶端渲染，添加樣式很容易。愛掏網(wǎng) - it200.com寫一個(gè)css樣式文件，在對(duì)應(yīng)組件中引用。愛掏網(wǎng) - it200.com標(biāo)簽上通過className這個(gè)屬性調(diào)用對(duì)應(yīng)樣式就萬事Ok了。愛掏網(wǎng) - it200.com當(dāng)然我們需要在webpack中配置loader來解析css文件。愛掏網(wǎng) - it200.com一般的配置如下（使用css modules）：
module: {
rules: [{
test: /\.css?$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoader: 1,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
}]
}]
}
需要先通過css-loader解析css文件，之后再通過style-loader將樣式放在html的style標(biāo)簽中。愛掏網(wǎng) - it200.com
那么SSR也這樣行嗎~
yarn dev
跑一下服務(wù)，發(fā)現(xiàn)命令行報(bào)這個(gè)錯(cuò)誤：
return window && document && document.all && !window.atob; ^ ReferenceError: window is not defined
原因在于服務(wù)器端渲染哪里有window對(duì)象，哪里有DOM啊。愛掏網(wǎng) - it200.com我們是通過虛擬DOM。愛掏網(wǎng) - it200.comrenderToString這個(gè)方法生成出來的html字符串。愛掏網(wǎng) - it200.comstackoverflow搜了一下發(fā)現(xiàn)了isomorphic-style-loader這個(gè)專門用于同構(gòu)的style-loader。愛掏網(wǎng) - it200.com
話不多少搞起來。愛掏網(wǎng) - it200.com客戶端的webpack配置不需要變更還是使用css-loader+style-loader。愛掏網(wǎng) - it200.com服務(wù)器端就使用css-loader+isomorphic-style-loader了(和style-loader用法一波一樣)
// webpack.server.js
module: {
rules: [{
test: /\.css?$/,
use: ['isomorphic-style-loader', {
loader: 'css-loader',
options: {
importLoader: 1,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
}]
}]
}
配置好了Run一下，不報(bào)錯(cuò)了但是會(huì)閃一下屏。愛掏網(wǎng) - it200.com禁用掉js發(fā)現(xiàn)server端生成的html并沒有樣式，當(dāng)客戶端JS接管程序之后才會(huì)有樣式出現(xiàn)。愛掏網(wǎng) - it200.com這樣的體驗(yàn)相當(dāng)糟糕。愛掏網(wǎng) - it200.com
當(dāng)然我們確實(shí)沒有向服務(wù)器端生成的HTML添加style標(biāo)簽。愛掏網(wǎng) - it200.com
現(xiàn)在服務(wù)器返給我們的html是這樣的
return `
ssr ${ content }
這時(shí)我們想到了context這個(gè)玩意。愛掏網(wǎng) - it200.com在server端render之前。愛掏網(wǎng) - it200.com我們?cè)O(shè)置一個(gè)
let context = {
css: []
}
我們還知道在服務(wù)端渲染的時(shí)候有this.props.staticContext這樣一個(gè)props拿到我們?cè)O(shè)置context。愛掏網(wǎng) - it200.com另外isomorphic-style-loader提供給我們了
_getCss()這個(gè)方法。愛掏網(wǎng) - it200.com可以在SSR過程中拿到樣式。愛掏網(wǎng) - it200.com有了這兩個(gè)必要條件。愛掏網(wǎng) - it200.com我們就可以在每一個(gè)用到樣式的Component中通過componentWillMount這個(gè)生命周期
添加這樣一段代碼：
componentWillMount () {
if (this.props.staticContext) { // 只有服務(wù)端渲染時(shí)候有this.props.staticContext以及_getCss()
this.props.staticContext.css.push(styles._getCss())
}
}
這樣樣式就存儲(chǔ)在context這個(gè)變量的css數(shù)組中咯，改造一下server端的html輸出代碼：
const cssStr = context.css.length ? context.css.join('\n') : ''
return `
ssr ${content}
萬事