react-hydrate
Generic data fetching and SSR hydration pattern for React.
Features & Goals
- Co-locate data dependencies with your components
- Supports infinitely nested loaders
- Fetches requested data on the server and hydrates on the client for a fast startup
- Wraps components so users can easily define loading states for components
- Routing agnostic. Works with
react-router
v4. - Lightweight ~1.9kb
Related: react-hydrate-link - prefetch data for your next route using react-router v4.
Usage
Defining components
/** * Projects.js */ /** * dataLoader receives component props * and any state already in the store */ { return api } /** * mapStateToProps receives the * loaded data via `state` and any * component props. * * You should return `false` here if * the data needed is not yet availabe. * If a falsy value is returned, it * tells the library that the loader * hasn't been run yet or hasn't * yet resolved. */ { return stateprojects ? projects: stateprojects : false } { /** * Component is always passed a loading * prop that represents the status of their * dataLoader function */ return loading ? <div>Loading data...</div> : dataprojects }
/** * App.js */ <div> <Projects /> </div>
Creating root app
Server
app
Dependencies
- react-tree-walker: Walk a React element tree. by @ctrlplusb
MIT License