ryanflorence · March 26, 2021 15:23 · rolele · May 16, 2017 · matteocng · May 29, 2017
diff --git a/data.js b/data.js
 // routes.js
 const routes = [
  {
    path: '/',
    component: Home,
    exact: true
  },
  {
    path: '/gists',
    component: Gists
  },
  {
    path: '/settings',
    component: Settings
  }
 ]

 // components
 class Home extends React.Component {

  // called in the server render, or in cDM
  static fetchData(match) {
    // going to want `match` in here for params, etc.
    return fetch(/*...*/)
  }

  state = {
    // if this is rendered initially we get data from the server render
    data: this.props.initialData || null
  }

  componentDidMount() {
    // if rendered initially, we already have data from the server
    // but when navigated to in the client, we need to fetch
    if (!this.state.data) {
      this.constructor.fetchData(this.props.match).then(data => {
        this.setState({ data })
      })
    }
  }

  // ...
 }

 // App.js
 const App = ({ routes, initialData = [] }) => (
  <div>
    {routes.map((route, index) => (
      // pass in the initialData from the server for this specific route
      <Route {...route} initialData={initialData[index]} />
    ))}
  </div>
 )

 // server.js
 import { matchPath } from 'react-router'

 handleRequest((req, res) => {
  // we'd probably want some recursion here so our routes could have
  // child routes like `{ path, component, routes: [ { route, route } ] }`
  // and then reduce to the entire branch of matched routes, but for
  // illustrative purposes, sticking to a flat route config
  const matches = routes.reduce((matches, route) => {
    const match = matchPath(req.url, route.path, route)
    if (match) {
      matches.push({
        route,
        match,
        promise: route.component.fetchData ?
          route.component.fetchData(match) : Promise.resolve(null)
      })
    }
    return matches
  }, [])

  if (matches.length === 0) {
    res.status(404)
  }

  const promises = matches.map((match) => match.promise)

  Promise.all(promises).then((...data) => {
    const context = {}
    const markup = renderToString(
      <StaticRouter context={context} location={req.url}>
        <App routes={routes} initialData={data}/>
      </StaticRouter>
    )

    if (context.url) {
      res.redirect(context.url)
    } else {
      res.send(`
        <!doctype html>
        <html>
          <div id="root">${markup}</div>
          <script>DATA = ${escapeBadStuff(JSON.stringify(data))}</script>
        </html>
      `)
    }
  }, (error) => {
    handleError(res, error)
  })
 })

 // client.js
 render(
  <App routes={routes} initialData={window.DATA} />,
  document.getElementById('root')
 )
	// routes.js
	const routes = [
	{
	path: '/',
	component: Home,
	exact: true
	},
	{
	path: '/gists',
	component: Gists
	},
	{
	path: '/settings',
	component: Settings
	}
	]

	// components
	class Home extends React.Component {

	// called in the server render, or in cDM
	static fetchData(match) {
	// going to want `match` in here for params, etc.
	return fetch(/.../)
	}

	state = {
	// if this is rendered initially we get data from the server render
	data: this.props.initialData \|\| null
	}

	componentDidMount() {
	// if rendered initially, we already have data from the server
	// but when navigated to in the client, we need to fetch
	if (!this.state.data) {
	this.constructor.fetchData(this.props.match).then(data => {
	this.setState({ data })
	})
	}
	}

	// ...
	}

	// App.js
	const App = ({ routes, initialData = [] }) => (
	<div>
	{routes.map((route, index) => (
	// pass in the initialData from the server for this specific route
	<Route {...route} initialData={initialData[index]} />
	))}
	</div>
	)

	// server.js
	import { matchPath } from 'react-router'

	handleRequest((req, res) => {
	// we'd probably want some recursion here so our routes could have
	// child routes like `{ path, component, routes: [ { route, route } ] }`
	// and then reduce to the entire branch of matched routes, but for
	// illustrative purposes, sticking to a flat route config
	const matches = routes.reduce((matches, route) => {
	const match = matchPath(req.url, route.path, route)
	if (match) {
	matches.push({
	route,
	match,
	promise: route.component.fetchData ?
	route.component.fetchData(match) : Promise.resolve(null)
	})
	}
	return matches
	}, [])

	if (matches.length === 0) {
	res.status(404)
	}

	const promises = matches.map((match) => match.promise)

	Promise.all(promises).then((...data) => {
	const context = {}
	const markup = renderToString(
	<StaticRouter context={context} location={req.url}>
	<App routes={routes} initialData={data}/>
	</StaticRouter>
	)

	if (context.url) {
	res.redirect(context.url)
	} else {
	res.send(`
	<!doctype html>
	<html>
	<div id="root">${markup}</div>
	<script>DATA = ${escapeBadStuff(JSON.stringify(data))}</script>
	</html>
	`)
	}
	}, (error) => {
	handleError(res, error)
	})
	})

	// client.js
	render(
	<App routes={routes} initialData={window.DATA} />,
	document.getElementById('root')
	)