关于 React服务器端渲染(SSR)

最近经常听到其他主攻 Vue项目的前端小组提到 SSR这个名词，一直都不明白是什么东西，只以为是他们内部做的什么工具之类的东西，虽然有些好奇，但也没怎么在意，直到后来在某技术论坛闲逛的时候忽然也看到这个名词了，点进去后通篇看完才知道 ssr是个什么东西。

---

SSR的概念

Server Slide Rendering，缩写为 ssr，即服务器端渲染，因为是后端出身，所以其实早就明白是怎么回事，只是没这个具体名词的概念罢了，这个词被频繁提起也是拜近年来前端飞速发展所赐，主要针对 SPA应用，目的大概有以下几个：

1. 解决单页面应用的 SEO
   单页应用页面大部分主要的 HTML并不是服务器返回，服务器只是返回一大串的 脚本，页面上看到的大部分内容都是由脚本生成，对于一般网站影响不大，但是对于一些依赖搜索引擎带来流量的网站来说则是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息，自然也就无流量可言。
    
2. 解决渲染白屏
   因为页面 HTML由服务器端返回的脚本生成，一般来说这种脚本的体积都不会太小，客户端下载需要时间，浏览器解析以生成页面元素也需要时间，这必然会导致页面的显示速度比传统服务器端渲染得要慢，很容易出现首页白屏的情况，甚至如果浏览器禁用了 JS，那么将直接导致页面连基本的元素都看不到。

Vue 和 React是用来做单页应用最普遍的框架，因为我对 react更熟悉，所以这里我只说下 React SSR。

---

客户端部分

新建 React页面

首先，要有一个用于展示的 React页面，例如：

// ./client/components/About/index.jsx
import React, { Component } from 'react'
import styles from './style.scss'
import './style'

export default class About extends Component {
   
    constructor() {
        super()
        this.state = {
            txtInfo: ''
        }
    }
    componentWillMount() {
        this.state.txtInfo = 'zhangsan'
    }
    componentDidMount() {
        this.getInfo()
    }
    render() {
        return (
            <section className={styles['about-wrapper']}>
                <p className="title">About Page</p>
                <p className="txt-info">{
  this.state.txtInfo}</p>
            </section>
        )
    }
    getInfo() {
        fetch('/api/user/getInfo', {
            credentials: