react同构实践之实现自己的同构模板

// clinet.js
ReactDom.hydrate(<App />, document.getElementById('app'))

// server.js
const html = ReactDom.renderToString(<App />)

// app.js文件(后端入口)
import reactController from './controllers/react-controller'
// API路由
app.use(apiController.routes())

// ejs页面路由
app.use(ejsController.routes())

// react页面路由
app.use(reactController.routes())

// react-controller.js文件
import Router from 'koa-router'

const router = new Router({
 prefix: '/react'
})

router.all('/', async (ctx, next) => {

 const html = await render(ctx)

 ctx.body = html

})

export default router

import { StaticRouter } from 'react-router-dom'
 const App = () => {

  return (
   <Provider store={store}>

    <StaticRouter
     location={ctx.url}
     context={context}>
     
     <Layout />

    </StaticRouter>

   </Provider>
  )
 }

import { matchRoutes } from 'react-router-config'

import loadable from '@loadable/component'

const Root = loadable((props) => import('./pages/Root'))
const Index = loadable(() => import("./pages/Index"))
const Home = loadable(() => import("./pages/Home"))

const routes = [
 {
  path: '/',
  component: Root,
  routes: [
   {
    path: '/index',
    component: Index,
   },
   {
    path: '/home',
    component: Home,
    syncData () => {}
    routes: []
   }
  ]
 }
]

router.all('/', async (url, next) => {
 const branch = matchRoutes(routes, url)
})

// routes.js
{
 path: '/home',
 component: Home,
 asyncData (store, query) {
  const city = (query || '').split('=')[1]
 
  let promise = store.dispatch(fetchCityListAndTemperature(city || undefined))
  
  let promise2 = store.dispatch(setRefetchFlag(false))
 
  return Promise.all([promise, promise2])
  return promise
 }
}

// render.js
import { matchRoutes } from 'react-router-config'
import createStore from '../store/redux/index'

const store = createStore()
const branch = matchRoutes(routes, url)

const promises = branch.map(({ route }) => {
 // 遍历所有匹配路由，预加载数据
 return route.asyncData
  "app">${html}</div>
    <script>
     window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)};
    </script>
   </body>
  </html>

// 获取服务端提供的初始化数据
const preloadedState = window.__PRELOADED_STATE__ || undefined

delete window.__PRELOADED_STATE__

// 客户端store初始化
const store = createStore(preloadedState)

const App = () => {

 return (
  <Provider store={store}>

   <BrowserRouter>

    <Layout />
    
   </BrowserRouter>

  </Provider>
 )
}

// loadableReady由@loadabel/component提供，在code split模式下使用
loadableReady().then(() => {
 
 ReactDom.hydrate(<App />, document.getElementById('app'))

})

import { connect } from 'react-redux'

@connect(
 state => ({
  refetchFlag: state.weather.refetchFlag,
  quality: state.weather.quality
 }),
 dispatch => ({
  fetchCityListAndQuality: () => dispatch(fetchCityListAndQuality()),
  setRefetchFlag : () => dispatch(setRefetchFlag(true))
 })
)
export default class Quality extends Component {
 componentDidMount () {

  const {
   location: { search },
   refetchFlag,
   fetchCityListAndQuality,
   setRefetchFlag
  } = this.props

  const { location: city } = queryString.parse(search)

  refetchFlag 
   "color: #ff0000">打包方案

客户端打包
我想说的是“照旧”。因为在浏览器端运行的还是spa。入门级的具体见github，至于如何配置得赏心悦目，用起来得心应手，根据项目要求各显神通吧。
服务端打包
和客户端的异同：


同：
需要bable兼容不同版本的js语法
webpack v4+/babel v7+ ... 真香
... 留白
异：
入口文件不一样，出口文件不一样
这里既可以把整个服务端入口app.js作为打包入口，也可以把react路由的起点文件作为打包入口，配置输出为umd模块，再由app.js去require。以后者为例（好处在于升级改造项目时尽可能地降低对原系统的影响，排查问题也方便，断点调试什么的也方便）：


// webpack.server.js
const webpackConfig = {
 entry: {
  server: './src/server/index.js'
 },
 output: {
  path: path.resolve(__dirname, 'build'),
  filename: '[name].js',
  libraryTarget: 'umd'
 }
}

// app.js
const reactKoaRouter = require('./build/server').default
app.use(reactKoaRouter.routes())




css、image资源正常来说服务端无需处理，如何绕开
偷懒，还没开始研究，占个坑
require的是node自带的模块时避免被webpack打包


const serverConfig = { ... target: 'node' }


require第三方模块时如何避免被打包


const serverConfig = { ... externals: [ require('webpack-node-externals')() ]


生产环境代码无需做混淆压缩


... 留白
服务端直出时资源的搜集


服务端输出html时，需要定义好css资源、js资源，让客户端接管后下载使用。如果没啥追求，可以直接把客户端的输出文件全加上去，暴力稳妥，简单方便。但是上面提到的@loadable/component库，实现了路由组件懒加载/code split功能后，也提供了全套服务，配套套装的webpack工具，ssr工具，帮助我们做搜集资源的工作。


// webpack.base.js
const webpackConfig = {
 plugins: [ ..., new LoadablePlugin() ]
}

// render.js
import { ChunkExtractor } from '@loadable/server'

const App = () => {

 return (
  <Provider store={store}>

   <StaticRouter
    location={ctx.url}
    context={context}>
    
    <Layout />

   </StaticRouter>

  </Provider>
 )
}

const webStats = path.resolve(
 __dirname,
 '../public/loadable-stats.json', // 该文件由webpack插件自动生成
)

const webExtractor = new ChunkExtractor({ 
 entrypoints: ['client'],  // 为入口文件名
 statsFile: webStats
})


const jsx = webExtractor.collectChunks(<App />)

const html = renderToString(jsx)

const scriptTags = webExtractor.getScriptTags()
const linkTags = webExtractor.getLinkTags() 
const styleTags = webExtractor.getStyleTags()

const preloadedState = store.getState()

const helmet = Helmet.renderStatic()

return `
 <html>
  <head>
   ${helmet.title.toString()}
   ${helmet.meta.toString()}
   ${linkTags}
   ${styleTags}
  </head>
  <body>
   <div id="app">${html}</div>
   <script>
    window.STORE = 'love';
    window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)};
   </script>
   ${scriptTags}
  </body>
 </html>
`


SEO信息


上面已经透露了。使用了一个react-helmet库。具体用法可查看官方仓库，信息可直接写在组件上，最后根据优先级提升到head头部。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。