estrattonbailey / React Hydrate
Generic data fetching, caching, and SSR hydration pattern for React
Stars: ✭ 27
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Hydrate
Os2
x86_64 OS kernel with completely async userspace and single address space [WIP; but basic kernel functionality implemented]
Stars: ✭ 25 (-7.41%)
Mutual labels: async
Forge Server Utils
Tools for accessing Autodesk Forge APIs from modern Node.js apps.
Stars: ✭ 23 (-14.81%)
Mutual labels: async
Ktx
LibKTX: Kotlin extensions for LibGDX games and applications
Stars: ✭ 913 (+3281.48%)
Mutual labels: async
Mysqlconnector
Async MySQL Connector for .NET and .NET Core
Stars: ✭ 942 (+3388.89%)
Mutual labels: async
Request.swift
A tiny HTTP client written in swift. URLSession alternative
Stars: ✭ 14 (-48.15%)
Mutual labels: async
Taskmanager
A simple、 light（only two file)、fast 、powerful 、easy to use 、easy to extend 、 Android Library To Manager your AsyncTask/Thread/CallBack Jobqueue ! 一个超级简单，易用，轻量级，快速的异步任务管理器，类似于AsyncTask，但是比AsyncTask更好用，更易控制，从此不再写Thread ！ ^_^
Stars: ✭ 25 (-7.41%)
Mutual labels: async
Gitter Api
[production-ready] Gitter API implementation for php 7.0+ allowing sync, async and streaming access.
Stars: ✭ 11 (-59.26%)
Mutual labels: async
Vue Loadable
⏳ Improve your loading state control with pretty simple methods and helpers.
Stars: ✭ 23 (-14.81%)
Mutual labels: async
Runtimepermission
Simpliest way to ask runtime permissions on Android, no need to extend class or override permissionResult method, choose your way : Kotlin / Coroutines / RxJava / Java7 / Java8
Stars: ✭ 860 (+3085.19%)
Mutual labels: async
Fastapi
FastAPI framework, high performance, easy to learn, fast to code, ready for production
Stars: ✭ 39,588 (+146522.22%)
Mutual labels: async
Iguazu Rest
✨ Iguazu REST is a plugin for the Iguazu ecosystem that allows for pre-built async calls for REST with smart caching.
Stars: ✭ 21 (-22.22%)
Mutual labels: async
Saber
⚔️ Saber, PHP异步协程HTTP客户端 | PHP Coroutine HTTP client - Swoole Humanization Library
Stars: ✭ 866 (+3107.41%)
Mutual labels: async
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-routerv4. - Lightweight ~1.9kb
Related: react-hydrate-link - prefetch data for your next route using react-router v4.
Usage
Defining components
/**
* Projects.js
*/
import api from 'my-api'
import { hydrate } from 'react-hydrate'
import Project from './Project.js'
export default hydrate(
/**
* dataLoader receives component props
* and any state already in the store
*/
(props, state) => {
return api.fetchProjects().then(projects => {
return {
projects: projects
}
})
},
/**
* 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.
*/
(state, props) => {
return state.projects ? {
projects: state.projects
} : false
}
)(({ loading, data, ...inheritedProps }) => {
/**
* Component is always passed a loading
* prop that represents the status of their
* dataLoader function
*/
return loading ? (
<div>Loading data...</div>
) : (
data.projects.map(project => <Project {...project} key={project.slug}>)
)
})
/**
* App.js
*/
import React from 'react'
import Projects from './Projects.js'
export default props => (
<div>
<Projects />
</div>
)
Creating root app
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { Tap } from 'react-hydrate'
import App from './App'
render((
<Router>
<Tap hydrate={window.__hydrate || null}>
<App />
</Tap>
</Router>
), document.getElementById('root'))
Server
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter: Router } from 'react-router'
import { Tap, createStore } from 'react-hydrate'
import { asyncRender } from 'react-hydrate/dist/server'
import App from './App.js'
app.use((req, res) => {
const ctx = {}
const store = createStore({})
const Root = (
<Router location={req.url} context={ctx}>
<Tap hydrate={store}>
<App />
</Tap>
</Router>
)
asyncRender(Root).then(() => {
const state = store.getState()
const content = renderToString(Root)
if (ctx.url) {
res.writeHead(302, {
Location: ctx.url
})
res.end()
} else {
res.send(`
<!DOCTYPE html>
<html>
<head></head>
<body>
${content}
<script>
window.__hydrate = ${JSON.stringify(state)}
</script>
<script src="/index.js"></script>
</body>
</html>
`)
res.end()
store.clearState()
}
})
})
Dependencies
- react-tree-walker: Walk a React element tree. by @ctrlplusb
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].