这篇文章给大家分享的是有关react中如何实现同构模板的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、做网站、开平网络推广、小程序开发、开平网络营销、开平企业策划、开平品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联为所有大学生创业者提供开平建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

TODO List

• 数据：如何保持前后端应用状态一致

• 路由：路由在服务端和客户端中的匹配方案

• 代码：同构，哪些地方可以共享，哪些地方需要差异化

• 静态资源：服务端如何引入css/图片等

• ssr直出资源：服务端在渲染路由页面时如何匹配css/chunks资源

• 打包方案：服务端和浏览器端如何写各自的webpack配置文件

• SEO: head头处理方案

同构的基础

正常的网页运行，需要生成dom，在dom树loaded之后由js绑定相关的dom事件，监听页面的交互。服务端并不具备dom的执行环境，因而所有的服务端渲染其实都是返回了一个填充了初始数据的静态文本。在react中，除了常用的render这个用于生成dom的方法，还提供了renderToString，renderToStaticMarkup方法用来生成字符串，由于VitualDOM的存在，结合这些方法就可以像以前的字符串模板那样生成普通的字符串，返回给客户端接管，再接着进行事件相关的绑定。最新的React v16+使用hydrate和ssr配套，能让客户端把服务端的VitualDOM渲染出来后得以复用，客户端加载js后不会重刷一边，减小了开销，也避免浏览器重刷dom时带来的闪屏体验。而react的组件，还是和往常写spa一样编写，前后端共享。不同的只是入口的渲染方法换了名字，且客户端会挂载dom而已。

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

// server.js
const html = ReactDom.renderToString()

同构后网站运行流程图

盗用一张图，来自阿里前端。乍一看，ssr与csr的区别就在于2 3 4 5，spa模式简单粗暴地返回一个空白的html页面，然后在11里才去加载数据进行页面填充，在此之前，页面都处于空白状态。而ssr则会根据路由信息，提前获取该路由页面的初始数据，返回页面时已经有了初步的内容，不至于空白，也便于搜索引擎收录。

路由匹配

浏览器端的路由匹配还是照着spa来做应该无需费心。略过了...

服务端的路由需要关注的，一个是后端服务的路由（如koa-router）匹配的问题，一个是匹配到react应用后react-router路由表的匹配问题。

服务端路由，可通过/react前缀来和api接口等其他区别开来，这种路由匹配方式甚至能让服务端渲染能同时支持老项目诸如ejs等的模板渲染方式，在系统升级改造方面可实现渐进式地升级。

// 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

react-router专供了给ssr使用的StaticRouter接口，称之为静态的路由。诚然，服务端不像客户端，对应于一次网络请求，路由就是当前的请求url，是唯一的，不变的。在返回ssr直出的页面后，页面交互造成地址栏的变化，只要用的是react-router提供的方法，无论是hash方式，还是history方式，都属于浏览器端react-router的工作了，于是完美继承了spa的优势。只有在输入栏敲击Enter，才会发起新一轮的后台请求。

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

  return (
   

    
     
     

    

   
  )
 }

应用状态数据管理

以往的服务端渲染，需要在客户端网页下载后马上能看到的数据就放在服务器提前准备好，可延迟展示，通过ajax请求的数据的交互逻辑放在页面加载的js文件中去。

换成了react，其实套路也是一样一样的。但是区别在于：

传统的字符串模板，组件模板是彼此分离的，可各自单独引入数据，再拼装起来形成一份html。而在react的ssr里，页面只能通过defaultValue和defaultProps一次性render，无法rerender。

不能写死defaultValude，所以只能使用props的数据方案。在执行renderToString之前，提前准备好整个应用状态的所有数据。全局的数据管理方案可考虑redux和mobx等。

需要准备初始渲染数据，所以要精准获取当前地址将要渲染哪些组件。react-router-config和react-router同源配套，是个支持静态路由表配置的工具，提供了matchRoutes方法，可获得匹配的路由数组。

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)
})

组件的初始数据接口请求，最美的办法当然是定义在各自的class组件的静态方法中去，但是前提是组件不能被懒加载，不然获取不到组件class，当然也无法获取class static method了，很多使用@loadable/component（一个code split方案）库的开发者多次提issue，作者也明示无法支持。不支持懒加载是绝对不可能的了。所以委屈一下代码了，在需要的route对象中定义一个asyncData方法。

服务端

// 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
  ? route.asyncData(store, query)
  : Promise.resolve(null)

})
// 完成store的预加载数据初始化工作
await Promise.all(promises)
// 获取最新的store
const preloadedState = store.getState()

const App = (props) => {

 return (
  

   
    
    

   

  
 )
}
// 数据准备好后，render整个应用
const html = renderToString()

// 把预加载的数据挂载在`window`下返回，客户端自己去取
return 
  
   
   
    ${html}

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

delete window.__PRELOADED_STATE__

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

const App = () => {

 return (
  

   

    
    
   

  
 )
}

// loadableReady由@loadabel/component提供，在code split模式下使用
loadableReady().then(() => {
 
 ReactDom.hydrate(, 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 
   ? fetchCityListAndQuality(city || undefined)
   : setRefetchFlag()
 }
}

// 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())

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

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

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

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

const App = () => {

 return (
  

   
    
    

   

  
 )
}

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

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


const jsx = webExtractor.collectChunks()

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 `
 
  
   ${helmet.title.toString()}
   ${helmet.meta.toString()}
   ${linkTags}
   ${styleTags}
  
  
   ${html}