溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前一篇主要記錄了一下SSR配置以及結合Redux的使用。這里簡單說一下React SSR中樣式處理和更優雅的SEO
SSR樣式
在React客戶端渲染，添加樣式很容易。寫一個css樣式文件，在對應組件中引用。標簽上通過className這個屬性調用對應樣式就萬事Ok了。當然我們需要在webpack中配置loader來解析css文件。一般的配置如下（使用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標簽中。
那么SSR也這樣行嗎~
yarn dev
跑一下服務，發現命令行報這個錯誤：
return window && document && document.all && !window.atob;
^ReferenceError: window is not defined
原因在于服務器端渲染哪里有window對象，哪里有DOM啊。我們是通過虛擬DOM。renderToString這個方法生成出來的html字符串。stackoverflow搜了一下發現了isomorphic-style-loader這個專門用于同構的style-loader。
話不多少搞起來。客戶端的webpack配置不需要變更還是使用css-loader+style-loader。服務器端就使用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一下，不報錯了但是會閃一下屏。禁用掉js發現server端生成的html并沒有樣式，當客戶端JS接管程序之后才會有樣式出現。這樣的體驗相當糟糕。
當然我們確實沒有向服務器端生成的HTML添加style標簽。
現在服務器返給我們的html是這樣的
return `
<html>
<head>
<title>ssr</title>
</head>
<body>
<div id='root' >${ content }</div>
<script>
window.context = {
state: ${ JSON.stringify(store.getState()) }
}
</script>
<script src='/index.js' ></script>
</body>
</html>
`
這時我們想到了context這個玩意。在server端render之前。我們設置一個
let context = {
css: []
}
我們還知道在服務端渲染的時候有this.props.staticContext這樣一個props拿到我們設置context。另外isomorphic-style-loader提供給我們了
_getCss()這個方法。可以在SSR過程中拿到樣式。有了這兩個必要條件。我們就可以在每一個用到樣式的Component中通過componentWillMount這個生命周期
添加這樣一段代碼：
componentWillMount () {
if (this.props.staticContext) { // 只有服務端渲染時候有this.props.staticContext以及_getCss()
this.props.staticContext.css.push(styles._getCss())
}
}
這樣樣式就存儲在context這個變量的css數組中咯，改造一下server端的html輸出代碼：
const cssStr = context.css.length ? context.css.join('\n') : ''
return `
<html>
<head>
<title>ssr</title>
<style>${cssStr}</style>
</head>
<body>
<div id='root' >${content}</div>
<script>
window.context = {
state: ${JSON.stringify(store.getState())}
}
</script>
<script src='/index.js' ></script>
</body>
</html>
`
萬事👌，當然我們可以進一步優化，把componentWillMount所做的事情提出來搞一個HOC（高階組件）。
withStylesHOC.js
import React, {
Component
} from 'react'
export default (DecoratedComponent, styles) => {
return class NewComponent extends Component {
componentWillMount () {
if (this.props.staticContext) {
this.props.staticContext.css.push(styles._getCss())
}
}
render () {
return <DecoratedComponent {...this.props} />
}
}
}
這樣簡單的封裝一個HOC，之后涉及樣式的時候直接通過withStylesHOC包裹一下就好。例如一個結合Redux的Home組件：
export default connect(mapState, mapDispatch)(withStyle(Home, styles))
SSR-SEO
費大力氣通過一個node中間層去實現首屏的SSR，除開首屏速度之外，就是SEO這一大塊了，對于一個商業網站來講真的很重要。
SEO（Search Engine Optimization）– 通過一些技術手段讓網站在搜索引擎的排名盡量靠前一點。由于客戶端渲染出來的網站只有<div id='root'>這樣的html節點。大多數搜索引擎分析不出來網站上有什么。SSR直接渲染出來HTML，這樣對搜索引擎就友好了很多。
SSR中的SEO
這里我們使用github上的一個庫react-helmet首先需要在對應的頁面組件中引入react-helmet，就可以在Helmet標簽內自由添加title、meta咯
// Home.jax
import { Helmet } from 'react-helmet'
class Home extends Component {
render() {
return (
<Fragment>
<Helmet>
<title>SRR-Home</title>
<meta name='description' content='this is a home Component' />
</Helmet>
...
...
</<Fragment>>
)
}
}
之后按照readme所說的。在server端這樣處理
ReactDOMServer.renderToString(<Handler />); const helmet = Helmet.renderStatic();
并在返回的html字符串中 ${helmet.title.toString()} ${helmet.meta.toString()}進行填充
<html>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
<style>${cssStr}</style>
</head>
<body>
<div id='root' >${content}</div>
<script>
window.context = {
state: ${JSON.stringify(store.getState())}
}
</script>
<script src='/index.js' ></script>
</body>
</html>
重新跑一下 搞定！
當然SSR-SEO絕不這么簡單。僅僅在頁面上添加head標簽內加上title 和meta標簽影響是有限的。8102年的搜索爬蟲已經不單單去匹配title和 description，而是全穩的匹配（也就是說title和descript有影響但是影響很小）搜索爬蟲會把整個網站所有的文本收集起來進行分析。
那么如何做好SEO
題外話順便說一下如何做好SEO。一個網站無非三大塊內容，文字、多媒體、鏈接。要做到的是文字的原創性，圖片的原創性以及高清度還有站內鏈接盡量和站內內容相關。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
