React服务端渲染原理

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const merge = require('webpack-merge')
const config = require('./webpack.base.js')

const serverConfig = {
    // 当前环境为node环境
    target: 'node',
    mode: 'development',
    entry: './src/server/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    externals: [nodeExternals()],
    module: {
        rules: [{
            test: /.css?$/,
            use: ['isomorphic-style-loader', {
                loader: 'css-loader',
                options: {
                    importLoaders: 1, //接下来要执行loader的数目
                    modules: {
                        localIdentName: '[name]_[local]_[hash:base64:5]'
                    }
                }
            }]
        }]
    }
}

module.exports = merge(config, serverConfig)

import React from 'react'
import Home from './containers/Home'
import Login from './containers/Login'
import Translation from './containers/Translation'
import NotFound from './containers/NotFound'
import App from './App'

export default [
    {
        path: "/",
        // 只要目录结构里带‘/’根路径，就显示App
        component: App,
        loadData: App.loadData,
        routes: [
            {
                path: "/",
                component: Home,
                // 精确匹配
                exact: true,
                // 加载HOme组件之前要执行的方法,
                loadData: Home.loadData,
                key: 'home',
                routes: [{
                    path: '/test',
                    component: Login,
                    exact: true,
                    key: 'test'
                }]
            },
            {
                //直接展示login组件，不需要加载任何的数据，不需要loadData方法的定义
                path: '/login',
                component: Login,
                exact: true,
                key: 'login'
            },
            {
                path: '/translation',
                component: Translation,
                loadData: Translation.loadData,
                exact: true,
                key: 'translation'
            },
            {
                component: NotFound
            }
        ]
    },
]

import { matchRoutes } from 'react-router-config'
const matchedRoutes = matchRoutes(routes, req.path)

const promises = []
matchedRoutes.forEach(item => {
    // 把store传进组件,这是一个异步函数
    if (item.route.loadData) {
        // 经过包装，即使有请求失败，也会调用Promise.then()，显示请求成功的数据
        const promise = new Promise((resolve, reject) => {
            item.route.loadData(store).then(resolve).catch(resolve)
        })
        promises.push(promise)
    }
})
console.log(matchRoutes)

// 让matchRoutes里面所有的组件，对应的loadData方法执行一次
// 把获取到的数据，放到store里面

import express from 'express'
import { render } from './utils'
import getStore from '../store/index'
// now routes is Array
import routes from '../Routes'
// matchPath只能匹配一层路由，matchRoutes可以匹配多层路由
import { matchRoutes } from 'react-router-config'

const app = express()
// 只要访问静态文件，就到根目录的public目录下查找
app.use(express.static('public'))

// 访问应用的跟路径，展示一个内容为hello world的html
app.get('*', (req, res) => {
    const store = getStore()
    const matchedRoutes = matchRoutes(routes, req.path)

    const promises = []
    matchedRoutes.forEach(item => {
        // 把store传进组件,这是一个异步函数
        if (item.route.loadData) {
            promises.push(item.route.loadData(store))
        }
    })
    console.log(matchedRoutes)

    Promise.all(promises).then(() => {
        res.send(render(store, routes, req))
    })
})

const server = app.listen(3001, () => {
    const host = server.address().address
    const port = server.address().port
    console.log('Example app listening at http://%s:%s', host, port)
})

import React from 'react'
import { renderToString } from 'react-dom/server'
// 服务端渲染路由只能用StaticRouter
import { StaticRouter, Route } from 'react-router-dom'
import { Provider } from 'react-redux'

export const render = (store, routes, req) => {
    // 服务端渲染时，store里填充什么，需要结合当前用户请求地址和路由做判断
    // 如果访问/路径，就拿home组件的异步数据
    // 如果访问login路径，就拿login组件的异步数据

    //当所有的数据准备好了之后，再生成下面的页面
    const content = renderToString((
        <Provider store={store}>
            {/* req.path获取用户请求的路径 */}
            <StaticRouter location={req.path} context={{}}>
                <div>
                    {/* {Routes} */}
                    {routes.map(route => (
                        <Route {...route} />
                    ))}
                </div>
            </StaticRouter>
        </Provider>
    ))
    return `
                   <html>
                       <head>
                           <title>react ssr</title>
                       </head>
                       <body>
                           <div id="root">${content}</div>
                           <script src='/index.js'></script>
                    </body>
                   </html>
               `
}

<html>
<head>
    <title>react ssr</title>
</head>
<body>
    <div id="root">${content}</div>
    <script>
            window.context = {
                state: ${JSON.stringify(store.getState())}
            }
    </script>
    <script src='/index.js'></script>
</body>
</html>

// 为了客户端渲染时，能获得服务端渲染时的store，
export const getClientStore = () => {
    const defaultState = window.context.state
    // 把服务器端返回的store，当做reducer的默认值
    return createStore(reducer, defaultState, applyMiddleware(thunk))
}

export const getHomeList = () => {
    return (dispatch) => {
        // https://www.apiopen.top/journalismApi
        return axios.get('/api/journalismApi')
        .then((res) => {
            const list = res.data.data.tech
            dispatch(changeList(list))
        })
    }   
}

// 当接收到api开头的请求，代理到https://www.apiopen.top上
app.use('/api', proxy('https://www.apiopen.top', {
    // 拼接https://www.apiopen.top + req.url
    proxyReqPathResolver: function(req) {
        return '/ssr/api' + req.url
    }
}));