1.1.1 • Published 6 years ago
react-get-app-data v1.1.1
🗂 react-get-app-data
Simple React HOC for getting intial and subsequent async data + SSR
Install
$ yarn add react-get-app-dataAPI
Example
As HOC
import 'isomorphic-fetch'
import React from 'react'
import ReactDOM from 'react-dom'
import { withData } from 'react-get-app-data'
const Page = ({ user = {} }) => <div>Hello {user.name}!</div>
const PageWithData = withData(() =>
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(res => res.json())
.then(user => ({ user }))
)(Page)
ReactDOM.render(<PageWithData />, document.getElementById('root'))
Or as static property inside component
import 'isomorphic-fetch'
import React from 'react'
import ReactDOM from 'react-dom'
import { withData } from 'react-get-app-data'
class Page extends React.Component {
static defaultProps = {
user: {}
}
static async getData() {
const user = await fetch(
'https://jsonplaceholder.typicode.com/users/1'
).then(res => res.json())
return {
user
}
}
render() {
const { user } = this.props
return <div>Hello {user.name}!</div>
}
}
const PageWithData = withData()(Page)
ReactDOM.render(<PageWithData />, document.getElementById('root'))
Server-Side Rendering
// server.js
import React from 'react'
import { renderToString } from 'react-dom/server'
import { getAppInitialData } from 'react-get-app-data'
import { html } from 'common-tags'
import App from './app'
export default () => (req, res) => {
const appElement = (<App />)
getAppInitialData(appElement)
.then((initialData) => {
const app = renderToString(appElement)
res.send(html`
<!DOCTYPE html>
<html>
<body>
<div id="app">${app}</div>
<script>
(function () {
window._ssr = ${JSON.stringify({ initialData })};
})();
</script>
<script src="/client.js"></script>
</body>
</html>
`)
})
.catch((error) => {
console.error(error)
res.status(500)
res.send(`Error: ${error.message}`)
})
}Hydrate app and initialData in client
// client.js
import React from 'react'
import ReactDOM from 'react-dom'
import { hydrateData } from 'react-get-app-data'
import App from './app'
// Get server state
const { initialData } = (window._ssr || {})
// Restore app state
hydrateData(initialData)
// Render app
ReactDOM.hydrate((
<App />
), document.getElementById('app'))Related
- react-tree-walker - inside
getAppInitialData - webpack-hot-server-middleware - server-side entry for webpack
- goremykina.com - usage example
MIT © John Grishin