使用 React + Koa 从零开始一步一步的带你开发一个 36kr SSR 案例（二）

时间 2019-11-07

标签使用 react koa 开始一步开发一个 36kr ssr 案例栏目 React 繁體版

原文原文链接

前言

原本在上周就想写下这篇文章，可是在学习的过程当中，愈来愈以为以前的不少思路须要修改，因此就下定决心，等我重构完这个项目以后再写第二篇教程。css

先上代码仓库githubhtml

看过我第一篇文章的朋友们应该已经大体了解了 react ssr 的基本思路了，若是没有第一篇文章的同窗建议先看教程一，可是只是掌握这些仍是远远不够的。前端

首先梳理下上篇教程所带来的问题node

路由配置了两次，而且还要手动保持 react-router 和 koa-router 路径一致。
一样的请求，须要编写两次。
即便客户端资源完成打包，服务端依旧依赖了客户端的源代码。
没办法写css module。
开发环境不友好，须要启动两个服务，而且热更新支持不好。

很是幸运，以上的问题在 v2 中都已解决。下面就跟着我依次解决上述问题，因为考虑文章篇幅，此次我不会贴出太多的源码，只叙述个人思路以及部分核心代码，强烈建议掘友们本身动手 码一码。react

重构路由以及请求

在上次的文章中我分别采用了 react-router 和 koa-router 来构建项目的路由,而且手动保持两端路由的一致性,这样的好处是更加的灵活以及解耦，但缺点是是编写不少重复的代码，考虑咱们实际开发中，对于输出 html 的路由先后端基本是一致的，而且数据处理出入不大，则咱们在 koa-router 的 html 路由部分能够彻底采用 react-router 的配置。webpack

首先咱们npm i react-router-config -S，这个包在后面会发挥相当重要的做用。git

重构路由配置以下github

import React from 'react';
import Home from './pages/home'
import Detail from './pages/detail'

export default [
    {
        path: '/',
        component: Home,
        exact: true,
    },
    {
        path: '/detail/:id',
        component: Detail,
        exact: true,
    },
]
复制代码

koa-router 修改以下web

router.get('/api/flash', HomeControl.flash);
router.get('/api/column', HomeControl.column);
router.get('/api/detail', DetailControl.detail);
router.get('*', async (ctx, next) => {
    await render(ctx, template);
    next();
})
复制代码

这样咱们全部直出html 的路由部分走同一个控制器，想知道render 干了什么事？npm

其实和以前同样，经过 renderToString 输出对应路由的html，而后填充数据，返回最终的html，简单看下

import { renderRoutes } from 'react-router-config';
function templating(template) {
    return props => template.replace(/<!--([\s\S]*?)-->/g, (_, key) => props[key.trim()]);
}

function(ctx, template) {
    try {
        const render = templating(template);
        const html = renderToString(
            <Provider store={store}> <StaticRouter location={ctx.url} context={ctx}> { renderRoutes(routerConfig) } // 这里的routerConfig就是上面配置的路由信息 </StaticRouter> </Provider>
        );
        const body = render({
            html,
            store: `<script>window.__STORE__ = ${JSON.stringify(ctx.store.getState())}</script>`,
        });
        ctx.body = body;
        ctx.type = 'text/html';
    }
    catch (err) {
        console.error(err.message);
        ctx.body = err.message;
        ctx.type = 'text/html';
    }
}
复制代码

在模板中使用注释当作占位符，抛弃了花括号，这样先后端就能够共用一个模板了。

可是上面的store 部分咱们怎么去获取呢？在以前咱们是在每一个路由渲染以前请求数据而后将数据传递给render 函数，如今咱们路由走的是同一个控制器，应该如何处理store ?

下面咱们就来重构下store

首先在每个路由组件上面编写一个静态方法 asyncData

function mapDispatchToProps(dispatch) {
    return {
        fetchHome: (id) => dispatch(homeActions.fetchHome(id)),
        fetchColumn: (page) => dispatch(homeActions.fetchColumn(page)),
    }
}

class Home extends React.Component {
    state = {
        tabs: [
            { title: '科技新闻', index: 0 },
            { title: '24h快讯', index: 1 }
        ],
        columnPage: this.props.column.length > 0 ? 1 : 0,
    }

    static asyncData(store) {
        const { fetchHome, fetchColumn } = mapDispatchToProps(store.dispatch);
        // 这里必须return Promise 而且这里发起请求走的是node环境，api路径必须写绝对路径。
        return Promise.all([
            fetchHome(),
            fetchColumn(),
        ])
    }
}
复制代码

而后在咱们的 render 函数中去调用对应组件的 asyncData 去初始化 store

import { renderRoutes, matchRoutes } from 'react-router-config';
import createStore from '../createStore.js'
function templating(template) {
    return props => template.replace(/<!--([\s\S]*?)-->/g, (_, key) => props[key.trim()]);
}

function(ctx, template) {
    try {
        // 初始化store
        const store = createStore();
        // 先获取全部匹配上的路由信息
        const routes = matchRoutes(routerConfig, ctx.url);
        // 若是没有匹配上路由则返回404
        if (routes.length <= 0) {
            return reject({ code: 404, message: 'Not Page' });
        }
        // 等全部数据请求回来以后在render, 注意这里不能用ctx上的路由信息，要使用前端的路由信息
        const promises = routes
        .filter(item => item.route.component.asyncData) // 过滤掉没有asyncData的组件
        .map(item => item.route.component.asyncData(store, item.match)); // 调用组件内部的asyncData,这里就修改了store
        Promise.all(promises).then(() => {
            ....同上
        })
    }
    catch (err) {
        ....同上
    }
}
复制代码

如今 store 的初始化彻底都由 action 控制，不须要咱们手动的经过初始值去初始化 store。不懂的看下图

好的，到这里咱们路由和数据处理以及重构完成。

重构koa代码

在上篇教程中，因为咱们的服务端代码中充斥着 jsx 代码，因此咱们在运行以前须要使用 babel 编译下源代码，但是 jsx 代码就那么一小部分，为了这一小部分，并且编译整个服务端代码，这是很是错误的决定，因此如今咱们来重构下 koa 的代码

既想不编译 koa 代码，又想让 node 识别 jsx，那咱们应该怎么处理呢？很是的简单，只要咱们把包含 jsx 代码的这部分抽取到一个单独的文件，而后咱们只编译这个文件，这样不就好了？

其实上面的思路就是编写一个服务端入口文件。如今咱们既有客户端入口，也有服务端入口，而且他们都依赖 React React-router Redux，则咱们先编写一个公共文件，导出这部分的代码。

// createApp.js
import routerConfig from './router';
import createStore from './redux/store/createStore';
import { renderRoutes } from 'react-router-config';


export default function(store = {}) {
    return {
        router: renderRoutes(routerConfig),
        store: createStore(store),
        routerConfig,
    }
}
复制代码

而后编写 server-entry.js 返回一个 controller

import ReactDom from 'react-dom';
import { StaticRouter } from 'react-router-dom';
import React from 'react';
import { Provider } from 'react-redux';
import { matchRoutes } from 'react-router-config';
import createApp from './createApp';

export default ctx => {
    return new Promise((resolve, reject) => {
        const { router, store, routerConfig } = createApp();

        const routes = matchRoutes(routerConfig, ctx.url);

        // 若是没有匹配上路由则返回404
        if (routes.length <= 0) {
            return reject({ code: 404, message: 'Not Page' });
        }

        // 等全部数据请求回来以后在render, 注意这里不能用ctx上的路由信息，要使用前端的路由信息
        const promises = routes
        .filter(item => item.route.component.asyncData)
        .map(item => item.route.component.asyncData(store, item.match));

        Promise.all(promises).then(() => {
            ctx.store = store; // 挂载到ctx上，方便渲染到页面上
            resolve(
                <Provider store={store}> <StaticRouter location={ctx.url} context={ctx}> { router } </StaticRouter> </Provider>
            )
        }).catch(reject);
    })
}
复制代码

如今咱们只须要编写一个服务端打包的 webpack 配置文件, 将服务端入口打包成 node 能够识别的文件，而后在node端引入这个编译后的 controller 便可。

const merge = require('webpack-merge');
const webpack = require('webpack');
const baseConfig = require('./webpack.base.config');
const config = require('./config')[process.env.NODE_ENV];
const nodeExternals = require('webpack-node-externals');
const { resolve } = require('./utils');

module.exports = merge(baseConfig(config), {
    target: 'node',
    devtool: config.devtool,
    entry: resolve('app/server-entry.js'),
    output: {
        filename: 'js/server-bundle.js',
        libraryTarget: 'commonjs2' // 使用commonjs模块化
    },
    // 服务端打包的时候忽略外部的npm包
    externals: nodeExternals({
        // 固然外部的css仍是能够打进来的
        whitelist: /\.css$/
    }),
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(config.env),
            'process.env.VUE_ENV': '"server"'
        }),
    ]
})
复制代码

具体的请看 github，值得说明的是，千万不要吧 css 打进这个包，node 是不识别 css 的，因此须要抽离 css 代码。

如今咱们在服务端能够舒舒服服的写代码了，无需编译便可运行，而且咱们不在依赖前端的源代码，也能够开心的使用 css module 了

开启 css module 很简单，css-loader 就自带这个功能。

{
    loader: 'css-loader',
    options: {
        modules: true, // 开启css module
        localIdentName: '[path][local]-[hash:base64:5]' // css module 命名规则
    },
},
复制代码

最后咱们只须要npm build打包客户端资源和服务端资源，就能够直接 npm start 启动服务了。

因为咱们启动的服务须要依赖打包后的文件，生产环境没问题，可是开发环境我总不能每次修改了代码就要从新打包一次吧，这样会严重影响效率。下面咱们来讲下开发环境如何处理这个问题呢？

开发环境构建

起初我准备和上次同样，开启两个服务，客户端使用 webpack-dev-server 服务端作一层转发，将静态资源转发到 dev-server 服务，可是这样作在开发环境就不能实现 ssr，因此我决定合并这两个服务，由 koa 实现 dev-server 的功能。

编写 dev-server.js

const fs = require('fs')
const path = require('path')
const MFS = require('memory-fs')
const webpack = require('webpack')
const chokidar = require('chokidar')
const clientConfig = require('./webpack.client.config')
const serverConfig = require('./webpack.server.config')

const readFile = (fs, file) => {
    return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
}

module.exports = function(app, templatePath) {
    let bundle
    let template
    let clientHtml

    // 这里其实就是吧resolve单独拿出来了，其实你也能够直接吧下面的代码写在promise里面，这样的好处就是减小代码嵌套。
    let ready
    const readyPromise = new Promise(r => {
        ready = r
    })

    // 更新触发的函数
    const update = () => {
        if (bundle && clientHtml) {
            ready({ bundle, clientHtml });
        }
    }

    // 监听模版文件
    template = fs.readFileSync(templatePath, 'utf-8')
    chokidar.watch(templatePath).on('change', () => {
        template = fs.readFileSync(templatePath, 'utf-8')
        console.log('index.html template updated.')
        update()
    })

    // 添加热更新的入口
    clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
    clientConfig.output.filename = '[name].js'
    clientConfig.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )

    // 建立dev服务
    const clientCompiler = webpack(clientConfig)
    const devMiddleware = require('koa-webpack-dev-middleware')(clientCompiler, {
        publicPath: clientConfig.output.publicPath,
        noInfo: true
    });
    app.use(devMiddleware)
    clientCompiler.hooks.done.tap('DevPlugin', stats => {
        stats = stats.toJson()
        stats.errors.forEach(err => console.error(err))
        stats.warnings.forEach(err => console.warn(err))
        if (stats.errors.length) return
        // 获取dev内存中入口html
        clientHtml = readFile(
            devMiddleware.fileSystem,
            'server.tpl.html',
        )
        update()
    })

    // 开启热更新
    app.use(require('koa-webpack-hot-middleware')(clientCompiler))

    // 监听而且更新server入口文件
    const serverCompiler = webpack(serverConfig)

    // 建立一个内存文件系统
    const mfs = new MFS()
    serverCompiler.outputFileSystem = mfs
    serverCompiler.watch({}, (err, stats) => {
        if (err) throw err
        stats = stats.toJson()
        if (stats.errors.length) return

        // 获取内存中的server-bundle,并用eval函数执行,返回controller
        bundle = eval(readFile(mfs, 'js/server-bundle.js')).default;
        update()
    })

    return readyPromise
}
复制代码

最后在 koa 中区分下两个环境

if (isPro) {
    // 生成环境直接使用打包好的资源
    serverBundle = require('../dist/js/server-bundle').default;
    template = fs.readFileSync(resolve('../dist/server.tpl.html'), 'utf-8');
} else {
    // 开发环境建立一个服务
    readyPromise = require('../build/dev-server')(app, resolve('../app/index.html'));
}

router.get('*', async (ctx, next) => {
    if (isPro) {
        await render(ctx, serverBundle, template);
    } else {
        // 等待内存中文件获取到以后再渲染。
        const { bundle, clientHtml } = await readyPromise;
        await render(ctx, bundle, clientHtml);
    }
    next();
})
复制代码

好了，本篇教程到这里就结束了，若是帮助到你了，那么请不要吝啬你的赞和 start 有问题能够在下面评论或者在 github 上留言。最后各位看官给个人 github 点个 start，小编感激涕零啊。