React SSR样式及SEO的实践

时间 2019-11-13

标签 react ssr 样式 seo 实践栏目 React 繁體版

原文原文链接

前一篇主要记录了一下SSR配置以及结合Redux的使用。这里简单说一下React SSR中样式处理和更优雅的SEOcss

SSR样式
在React客户端渲染，添加样式很容易。写一个css样式文件，在对应组件中引用。标签上经过className这个属性调用对应样式就万事Ok了。固然咱们须要在webpack中配置loader来解析css文件。通常的配置以下（使用css modules）：html

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标签中。node

那么SSR也这样行吗~react

yarn dev

跑一下服务，发现命令行报这个错误：webpack

return window && document && document.all && !window.atob;
^

ReferenceError: window is not defined

缘由在于服务器端渲染哪里有window对象，哪里有DOM啊。咱们是经过虚拟DOM。renderToString这个方法生成出来的html字符串。stackoverflow搜了一下发现了isomorphic-style-loader这个专门用于同构的style-loader。git

话很少少搞起来。客户端的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是这样的github

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以前。咱们设置一个web

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.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。一个网站无非三大块内容，文字、多媒体、连接。要作到的是文字的原创性，图片的原创性以及高清度还有站内连接尽可能和站内内容相关。
为了学习工做与休闲娱乐互不冲突，现新建圈【码农茶水铺】用于程序员生活，爱好，交友，求职招聘，吐槽等话题交流，但愿各位大神工做之余到茶水铺来喝茶聊天。了解更多