React SSR样式及SEO的实践

前一篇主要记录了一下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 >${ content }</div> <script> window.context = { state: ${ JSON.stringify(store.getState()) } } </script> <script src='https://www.jb51.net/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 >${content}</div> <script> window.context = { state: ${JSON.stringify(store.getState())} } </script> <script src='https://www.jb51.net/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))

React SSR样式及SEO的实践

SSR-SEO

费大力气通过一个node中间层去实现首屏的SSR,除开首屏速度之外,就是SEO这一大块了,对于一个商业网站来讲真的很重要。

SEO(Search Engine Optimization)– 通过一些技术手段让网站在搜索引擎的排名尽量靠前一点。由于客户端渲染出来的网站只有<div>这样的html节点。大多数搜索引擎分析不出来网站上有什么。SSR直接渲染出来HTML,这样对搜索引擎就友好了很多。

SSR中的SEO

这里我们使用github上的一个库react-helmet首先需要在对应的页面组件中引入react-helmet,就可以在Helmet标签内自由添加title、meta咯

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6cb6f19b67f4cd9ee210bb406eb4b7bb.html