详解React+Koa实现服务端渲染(SSR)

import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const Home = () => 
Home
;
const Hello = () => 
Hello
;

const App = () => {
 return (
  
   
   
  
 )
}

ReactDOM.render(, document.getElementById('app'))

npm install react-loadable
# or
yarn add react-loadable

//...
import Loadable from 'react-loadable';
//...

const AsyncHello = Loadable({
 loading: 
loading...
,
 //把你的Hello组件写到单独的文件中
 //然后使用webpack的 dynamic import
 loader: () => import('./Hello'), 
})

//然后在你的路由中使用loadable包装过的组件:

npm install koa koa-router

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();
router.get('*', async (ctx) => {
 ctx.body = `
   
    
    
     
     
    
    
     

     
    
   
  `;
});

app.use(router.routes());
app.listen(3000, '0.0.0.0');

import React from 'react';
//使用静态 static router
import { StaticRouter } from 'react-router-dom';
import ReactDOMServer from 'react-dom/server';
import Loadable from 'react-loadable';
//下面这个是需要让react-loadable在服务端可运行需要的，下面会讲到
import { getBundles } from 'react-loadable/webpack';
import stats from '../build/react-loadable.json';

//这里吧react-router的路由设置抽出去，使得在浏览器跟服务端可以共用
//下面也会讲到...
import AppRoutes from 'src/AppRoutes';

//这里我们创建一个简单的class，暴露一些方法出去，然后在koa路由里去调用来实现服务端渲染
class SSR {
 //koa 路由里会调用这个方法
 render(url, data) {
  let modules = [];
  const context = {};
  const html = ReactDOMServer.renderToString(
    modules.push(moduleName)}>
    
     
    
   
  );
  //获取服务端已经渲染好的组件数组
  let bundles = getBundles(stats, modules);
  return {
   html,
   scripts: this.generateBundleScripts(bundles),
  };
 }
 //把SSR过的组件都转成script标签扔到html里
 generateBundleScripts(bundles) {
  return bundles.filter(bundle => bundle.file.endsWith('.js')).map(bundle => {
   return `\n`;
  });
 }

 static preloadAll() {
  return Loadable.preloadAll();
 }
}

export default SSR;

//webpack.config.dev.js, app bundle
const ReactLoadablePlugin = require('react-loadable/webpack')
 .ReactLoadablePlugin;

module.exports = {
 //...
 plugins: [
  //...
  new ReactLoadablePlugin({ filename: './build/react-loadable.json', }),
 ]
}

{
 "plugins": [
   "syntax-dynamic-import",
   "react-loadable/babel",
   ["import-inspector", {
    "serverSideRequirePath": true
   }]
  ]
}

//webpack.ssr.js
const nodeExternals = require('webpack-node-externals');

module.exports = {
 //...
 target: 'node',
 output: {
  path: 'build/node',
  filename: 'ssr.js',
  libraryExport: 'default',
  libraryTarget: 'commonjs2',
 },
 //避免把node_modules里的库都打包进去，此ssr js会直接运行在node端，
 //所以不需要打包进最终的文件中，运行时会自动从node_modules里加载
 externals: [nodeExternals()],
 //...
}

//...koa app.js
//build出来的ssr.js
const SSR = require('./build/node/ssr');
//preload all components on server side, 服务端没有动态加载各个组件，提前先加载好
SSR.preloadAll();

//实例化一个SSR对象
const s = new SSR();

router.get('*', async (ctx) => {
 //根据路由，渲染不同的页面组件
 const rendered = s.render(ctx.url);
 
 const html = `
  
   
   
    
   
   
    
${rendered.html}
    
    ${rendered.scripts.join()}
    
   
  
 `;
 ctx.body = html;
});
//...

//AppRoutes.js
import Loadable from 'react-loadable';
//...

const AsyncHello = Loadable({
 loading: 
loading...
,
 loader: () => import('./Hello'), 
})

function AppRoutes(props) {
 
  
  
  
}

export default AppRoutes

//然后在 App.js 入口中
import AppRoutes from './AppRoutes';
// ...
export default () => {
 return (
  
   
  
 )
}

//...
const fetch = require('isomorphic-fetch');

router.get('*', async (ctx) => {
 //fetch branch info from github
 const api = 'https://api.github.com/repos/jasonboy/wechat-jssdk/branches';
 const data = await fetch(api).then(res => res.json());
 
 //传入初始化数据
 const rendered = s.render(ctx.url, data);
 
 const html = `
  
   
   
    
   
   
    
${rendered.html}
    
    
    
    
    ${rendered.scripts.join()}
    
   
  
 `;
 ctx.body = html;
});

export default class Hello extends React.Component {
 constructor(props) {
  super(props);

  this.state = {
   //这里直接判断window，如果是父组件传入的话，通过props判断
   github: window.__INITIAL_DATA__ || [],
  };
 }
 
 componentDidMount() {
  //判断没有数据的话，再去请求数据
  //请求数据的方法也可以抽出去，以让浏览器及服务端能统一调用，避免重复写
  if (this.state.github.length <= 0) {
   fetch('https://api.github.com/repos/jasonboy/wechat-jssdk/branches')
    .then(res => res.json())
    .then(data => {
     this.setState({ github: data });
    });
  }
 }
 
 render() {
  return (
   

    

     {this.state.github.map(b => {
      return 
{b.name}
;
     })}
    
   
  );
 }
}