项目源码

拉了就跑

yarn

npm run ssr

Gif预览效果

SSR：服务端渲染，在服务端将首屏的html直接返回给客户端

SEO：让各爬虫能爬到首屏的内容，匹配到搜索关键字，提高在百度谷歌的排序
加快首屏速度，不再是加载完js然后ReactDom.render('#app', Com)，让服务器分担部分渲染的压力
详细看参考文档

精简易懂的内容来了

SSR怎么实现首屏渲染
结合Router
结合Redux
怎么按需加载
服务端怎么处理CSS和图片

SSR怎么实现首屏渲染

通过express服务来返回给浏览器首屏的HTML
HTML是由react-dom/server提供的renderToString来生成，理论依据是node虽然不能识别HTML和JSX,但React能生成虚拟DOM，然后插入HTML直接返回给浏览器识别渲染

import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
const app = express();
app.get( "/*", (req, res) => {
  const context = {}; // 上下文对象，可以存储有关渲染的信息
  const jsx = (
    <StaticRouter context={ context } location={ req.url }>
      <App />
    </StaticRouter>
  );
  const reactDom = renderToString( jsx ); // 在服务端将JSX渲染为HTML
  res.writeHead( 200, { "Content-Type": "text/html" } );
  res.end(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <link rel="icon" href="data:;base64,=">
      <title>React SSR</title>
    </head>
    <body>
      <div id="app">${ reactDom }</div>
      <script src="/index.js"></script> // 注意这里，服务端返回的HTMl会去加载webpack打包好的SPA应用，然后客户端接管应用，绑定事件，处理路由跳转和其他Ajax请求
    </body>
    </html>
  `);
});
app.listen(3000, () => {
  console.log('Running on http://localhost:3000/');
});

const jsx = (
    <Provider store={store}>
      <Router>
        <Layout />
      </Router>
    </Provider>
);
const app = document.getElementById( "app" );
ReactDOM.hydrate( jsx, app ); // 客户端接管应用后，React会将服务端渲染的标记加载，并将尝试将事件侦听器附加到现有标记

结合Router

服务端通过StaticRouter来渲染对应的组件，根据浏览器请求的url来匹配路由并返回对应组件
返回给浏览器后，加载webpack打包好的客户端js，然后接管页面
具体看代码哈

结合Redux

首屏页一般要请求接口渲染对应数据
将请求的数据设置到状态树上，并将JSON一并返回给浏览器
```
<script>
    window.REDUX_DATA = ${ JSON.stringify( state ) }
</script>
```

客户端接管应用后将数据初始化到客户端的状态树上

const store = createClientStore( window.REDUX_DATA );
const jsx = (
    <Provider store={store}>
      <Router>
        <Layout />
      </Router>
    </Provider>
);

怎么按需加载

使用react-lodable按需加载，其原理是import().then()，webpack在识别到后就能代码分割了

其会生成react-loadable.json来标识需要动态加载的组件

const jsx = (
  <Provider store={store}>
    <Loadable.Capture report={moduleName => modules.push(moduleName)}> // 需要懒加载的模块，最后在返回的HTML中去遍历
      <StaticRouter context={ context } location={ req.url }>
          <Layout />
      </StaticRouter>
    </Loadable.Capture>
  </Provider>
);

${bundles.map(bundle => {
    return `<script src="/${bundle.file}"></script>`
    // alternatively if you are using publicPath option in webpack config
    // you can use the publicPath value from bundle, e.g:
    // return `<script src="${bundle.publicPath}"></script>`
  }).join('\n')}

lodable实现原理

Lodable({
  loader: ()=> import(/* webpackChunkName: 'Hello' */'./Hello'),
  loading,
})
class Lodable {
  componentWillMount() {
    this.cancelUpdate = false;
    const { loader } = this.props;
    loader.then(Com=> {
      this.Com = Com;
      if(!this.cancelUpdate) {
        thi.forceUpdate(); // 初次懒加载完后重新渲染
      }
    })
  }
  componentWillUnmount() {
    this.cancelUpdate = true;
  }
  render() {
    const { comProps } = this.props;
    return this.Com ? (
      <this.Com.default {...comProps} />
    ) : (
      <this.Com {...comProps}/>
    )
  }
}

服务端怎么处理CSS和图片

服务端还是通过webpack来编译对应的node端的代码，来实现对CSS和图片资源的引用和处理
其实这里只要理解客户端和服务端分别打包，最后node运行服务端的js，返回HTML后加载客户端js，实现客户端接管应用

处理静态资源还有webpack-isomorphic-tools,universal-webpack，前者作者已经不更新了，我后面发现其实用webpack直接处理简单多了，可能是应用场景还用不到

const serverConfig = {
  target: 'node', // 标记为node端
  mode: 'development',
  entry: './src/server',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  externals: [nodeExternals()], // 不会讲node_modules打包进去
  module: {
    rules: [{
      test: /\.js?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      options: {
        cacheDirectory: true,
        plugins: ['transform-decorators-legacy'],
        presets: ["react", ["env", {
          "targets": {
            "node": "current"
          }
        }], "stage-0"],
      }
    }, {
      test: /\.css?$/,
      use: ['isomorphic-style-loader', { // 处理CSS服务端的loader
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: true,    // 开启css-module
          localIdentName: '[name]_[local]_[hash:base64:5]' //生成的class的命名规则
        }
      }]
    }, {
      test: /\.(png|jpeg|jpg|gif|svg)?$/,
      loader: 'url-loader',
      options: {
        limit: 8000,
        outputPath: '../build/',
        publicPath: '/'
      }
    }]
  },
  plugins: [
    new ReactLoadablePlugin({
      filename: './build/react-loadable.json',  // 按需加载的配置文件
    }),
  ]
};

参考文档

接下来准备做个

结合TS的服务端渲染全网免费听歌SPA应用（Jay Chou的也有的那种）

首页，排行榜，我的
将周杰伦的歌爬到mongoDB或者存在内存中
结合Aplayer
结合频谱图
看情况支持搜索其他歌手和歌曲