React Redux Router4 Koa 服务端渲染，惰性加载，热更新教程

￡神魔★判官ぃ 2022-03-16 13:50 178阅读 0赞

在实际项目中，大多数都需要服务端渲染。

## 服务端渲染的优势： ##

*  1.首屏性能好，不需要等待 js 加载完成才能看到页面
 *  2.有利于SEO

网上很多服务端渲染的教程，但是碎片化很严重，或者版本太低。一个好的例子能为你节省很多时间！

--------------------

### 演示 ###

[点击预览][Link 1]

### 演示版 Github地址: [github.com/tzuser/ssr][github.com_tzuser_ssr] ###

--------------------

## 项目目录 ##

*  server为服务端目录。因为这是最基础的服务端渲染，为了代码清晰和学习，所以服务端只共用了前端组件。
 *  server/index.js为服务端入口文件
 *  static存放静态文件

## 教程源码 ##

### Github地址: [github.com/tzuser/ssr\_…][github.com_tzuser_ssr 1] ###

--------------------

## 教程开始 Webpack配置 ##

首先区分生产环境和开发环境。 开发环境使用webpack-dev-server做服务器

## webpack.config.js 基础配置文件 ##

## 开发环境 webpack.dev.js ##

在开发环境时需要热更新方便开发，而发布环境则不需要！

在生产环境中需要react-loadable来做分模块加载，提高用户访问速度，而开发时则不需要。

## 生产环境 webpack.build.js ##

在打包前使用clean-webpack-plugin插件删除之前打包文件。 使用react-loadable/webpack处理惰性加载 ReactLoadablePlugin会生成一个react-loadable.json文件,后台需要用到

## 模板文件 index.ejs ##

在基础配置webpack.config.js里 HTMLWebpackPlugin插件就是根据这个模板文件生成index.html 并且会把需要js添加到底部

### 注意 ###

*  模板文件只给前端开发或打包用，后端读取的是HTMLWebpackPlugin插件生成后的index.html。
 *  body下有个window.main() 这是用来确保所有js加载完成后再调用react渲染，window.main方法是src/index.js暴露的，如果对这个感到疑惑，没关系在后面后详解。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<link rel="icon" href="/static/favicon.ico" mce_href="/static/favicon.ico" type="image/x-icon">
    	<link rel="manifest" href="/static/manifest.json">
    	<meta name="viewport" content="width=device-width,user-scalable=no" >
    	<title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    	<div id="root"></div>
    </body>
    <script>window.main();</script>
    </html>
    复制代码

## 入口文件 src/index.js ##

和传统写法不同的是App.jsx采用require动态引入,因为module.hot.accept会监听App.jsx文件及App中引用的文件是否改变， 改变后需要重新加载并且渲染。 所以把渲染封装成render方法，方便调用。

暴露了main方法给window 并且确保Loadable.preloadReady预加载完成再执行渲染

import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import {Provider} from 'react-redux';
    import {createStore,applyMiddleware} from 'redux';
    import thunk from 'redux-thunk';
    //浏览器开发工具
    import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';
    import reducers from './reducers/index';
    
    import createHistory from 'history/createBrowserHistory';
    import {ConnectedRouter,routerMiddleware} from 'react-router-redux';
    import {  Router } from 'react-router-dom';
    import Loadable from 'react-loadable';
    
    const history = createHistory()
    const middleware=[thunk,routerMiddleware(history)];
    const store=createStore(
    	reducers,
    	composeWithDevTools(applyMiddleware(...middleware))
    	)
    if(module.hot) {
        //判断是否启用热加载
    		module.hot.accept('./reducers/index.js', () => {
        //侦听reducers文件
    			import('./reducers/index.js').then(({ default:nextRootReducer})=>{
    				store.replaceReducer(nextRootReducer);
    			});
    		});
    		module.hot.accept('./Containers/App.jsx', () => {
        //侦听App.jsx文件
    			render(store)
    		});
    	}
    
    const render=()=>{
    	const App = require("./Containers/App.jsx").default;
    	ReactDOM.hydrate(
    		<Provider store={store}> <ConnectedRouter history={history}> <App /> </ConnectedRouter> </Provider>,
    		document.getElementById('root'))
    }
    
    window.main = () => {
        //暴露main方法给window
      Loadable.preloadReady().then(() => {
    	render()
      });
    };
    
    复制代码

## APP.jsx 容器 ##

import React,{Component} from 'react';
    import {Route,Link} from 'react-router-dom';
    import Loadable from 'react-loadable';
    const loading=()=><div>Loading...</div>;
    const LoadableHome=Loadable({
    	loader:()=> import(/* webpackChunkName: 'Home' */ './Home'),
    	loading
    });
    const LoadableUser = Loadable({
      loader: () => import(/* webpackChunkName: 'User' */ './User'),
      loading
    });
    const LoadableList = Loadable({
      loader: () => import(/* webpackChunkName: 'List' */ './List'),
      loading
    });
    class App extends Component{
    	render(){
    		return(
    			<div>
    				<Route exact path="/"  component={LoadableHome}/>
    				<Route path="/user" component={LoadableUser}/>
    				<Route path="/list" component={LoadableList}/>
    
    				<Link to="/user">user</Link>
    				<Link to="/list">list</Link>
    			</div>
    		)
    	}
    };
    export default App
    复制代码

注意这里引用Home、User、List页面时都用了

const LoadableHome=Loadable({
    	loader:()=> import(/* webpackChunkName: 'Home' */ './Home'),
    	loading
    });
    复制代码

这种方式惰性加载文件，而不是import Home from './Home'。

/\* webpackChunkName: 'Home' \*/ 的作用是打包时指定chunk文件名

## Home.jsx 容器 ##

home只是一个普通容器 并不需要其它特殊处理

import React,{Component} from 'react';
    const Home=()=><div>首页更改</div>
    export default Home
    复制代码

## 接下来-服务端 ##

## server/index.js ##

加载了一大堆插件用来支持es6语法及前端组件

require('babel-polyfill')
    require('babel-register')({
      ignore: /\/(build|node_modules)\//,
      presets: ['env', 'babel-preset-react', 'stage-0'],
      plugins: ['add-module-exports','syntax-dynamic-import',"dynamic-import-node","react-loadable/babel"]
    });
    
    require('./server');
    复制代码

## server/server.js ##

注意 路由首先匹配路由，再匹配静态文件，最后app.use(render)再指向render。为什么要这么做？

比如用户访问根路径/ 路由匹配成功渲染首页。紧跟着渲染完成后需要加载/main.js,这次路由匹配失败，再匹配静态文件，文件匹配成功返回main.js。

如果用户访问的网址是/user路由和静态文件都不匹配，这时候再去跑渲染，就可以成功渲染user页面。

const Loadable=require('react-loadable');
    const Router = require('koa-router');
    const router = new Router();
    
    const path= require('path')
    const staticServer =require('koa-static')
    const Koa = require('koa')
    const app = new Koa()
    const render = require('./render.js')
    
    router.get('/', render);
    
    app.use(router.routes())
    .use(router.allowedMethods())
    .use(staticServer(path.resolve(__dirname, '../build')));
    app.use(render);
    
    
    Loadable.preloadAll().then(() => {
      app.listen(3000, () => {
        console.log('Running on http://localhost:3000/');
      });
    });
    
    复制代码

## 最重要的 server/render.js ##

写了prepHTML方法，方便对index.html处理。 render首先加载index.html 通过createServerStore传入路由获取store和history。

在外面包裹了Loadable.Capture高阶组件，用来获取前端需要加载路由地址列表， `[ './Tab', './Home' ]`

通过getBundles(stats, modules)方法取到组件真实路径。 stats是webpack打包时生成的react-loadable.json

[ { id: 1050,
        name: '../node_modules/.1.0.0-beta.25@material-ui/Tabs/Tab.js',
        file: 'User.3.js' },
      { id: 1029, name: './Containers/Tab.jsx', file: 'Tab.6.js' },
      { id: 1036, name: './Containers/Home.jsx', file: 'Home.5.js' } ]
    复制代码

使用bundles.filter区分css和js文件，取到首屏加载的文件后都塞入html里。

import React from 'react'
    import Loadable from 'react-loadable';
    import { renderToString } from 'react-dom/server';
    import App from '../src/Containers/App.jsx';
    import {ConnectedRouter,routerMiddleware} from 'react-router-redux';
    import { StaticRouter } from 'react-router-dom'
    import createServerStore from './store';
    import {Provider} from 'react-redux';
    import path from 'path';
    import fs from 'fs';
    import Helmet from 'react-helmet';
    import { getBundles } from 'react-loadable/webpack'
    import stats from '../build/react-loadable.json';
    
    //html处理
    const prepHTML=(data,{html,head,style,body,script})=>{
    	data=data.replace('<html',`<html ${html}`);
    	data=data.replace('</head>',`${head}${style}</head>`);
    	data=data.replace('<div id="root"></div>',`<div id="root">${body}</div>`);
    	data=data.replace('</body>',`${script}</body>`);
    	return data;
    }
    
    const render=async (ctx,next)=>{
    		const filePath=path.resolve(__dirname,'../build/index.html')
    		let html=await new Promise((resolve,reject)=>{
    			fs.readFile(filePath,'utf8',(err,htmlData)=>{
        //读取index.html文件
    				if(err){
    					console.error('读取文件错误!',err);
    					return res.status(404).end()
    				}
    				//获取store
    				const { store, history } = createServerStore(ctx.req.url);
    
    				let modules=[];
    				let routeMarkup =renderToString(
    					<Loadable.Capture report={moduleName => modules.push(moduleName)}>
    						<Provider store={store}>
    							<ConnectedRouter history={history}>
    								<App/>
    							</ConnectedRouter>
    						</Provider>
    					</Loadable.Capture>
    					)
    
    				let bundles = getBundles(stats, modules);
    				let styles = bundles.filter(bundle => bundle.file.endsWith('.css'));
    				let scripts = bundles.filter(bundle => bundle.file.endsWith('.js'));
    
    				let styleStr=styles.map(style => {
    					        	return `<link href="/dist/${style.file}" rel="stylesheet"/>`
    					      	}).join('\n')
    
    				let scriptStr=scripts.map(bundle => {
    					        	return `<script src="/${bundle.file}"></script>`
    					      	}).join('\n')
    
    				const helmet=Helmet.renderStatic();
    				const html=prepHTML(htmlData,{
    					html:helmet.htmlAttributes.toString(),
    					head:helmet.title.toString()+helmet.meta.toString()+helmet.link.toString(),
    					style:styleStr,
    					body:routeMarkup,
    					script:scriptStr,
    				})
    				resolve(html)
    			})
    		})
    		ctx.body=html;//返回
    }
    
    export default render;
    复制代码

## server/store.js ##

创建store和history和前端差不多，createHistory(\{ initialEntries: \[path\] \})，path为路由地址

import { createStore, applyMiddleware, compose } from 'redux';
    import { routerMiddleware } from 'react-router-redux';
    import thunk from 'redux-thunk';
    
    import createHistory from 'history/createMemoryHistory';
    import rootReducer from '../src/reducers/index';
    
    // Create a store and history based on a path
    const createServerStore = (path = '/') => {
      const initialState = {};
    
      // We don't have a DOM, so let's create some fake history and push the current path
      let history = createHistory({ initialEntries: [path] });
    
      // All the middlewares
      const middleware = [thunk, routerMiddleware(history)];
      const composedEnhancers = compose(applyMiddleware(...middleware));
    
      // Store it all
      const store = createStore(rootReducer, initialState, composedEnhancers);
    
      // Return all that I need
      return {
        history,
        store
      };
    };
    
    export default createServerStore;
    复制代码

### 参考 ###

*  [react-loadable 分模块加载][react-loadable]
 *  [material-ui 服务端渲染配置][material-ui]
 *  [服务端渲染css报错][css]

#### 这是我同事写的一篇服务器渲染的教程，也非常不错 ####

[juejin.im/post/5a3920…][juejin.im_post_5a3920]

[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fblog.tangzuo.cc
[github.com_tzuser_ssr]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftzuser%2Fssr
[github.com_tzuser_ssr 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftzuser%2Fssr_base
[react-loadable]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fthejameskyle%2Freact-loadable
[material-ui]: https://link.juejin.im?target=https%3A%2F%2Fmaterial-ui-1dab0.firebaseapp.com%2Fguides%2Fserver-rendering%2F
[css]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FBetaMee%2FReactBlog%2Fissues%2F6
[juejin.im_post_5a3920]: https://juejin.im/post/5a392018f265da431b6d5501