https://github.com/hamlim/simple-cache
A simple react cache implementation
https://github.com/hamlim/simple-cache
cache react server-components
Last synced: 11 months ago
JSON representation
A simple react cache implementation
- Host: GitHub
- URL: https://github.com/hamlim/simple-cache
- Owner: hamlim
- Created: 2020-06-28T01:27:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-12T01:16:57.000Z (about 1 year ago)
- Last Synced: 2025-03-17T14:48:59.479Z (11 months ago)
- Topics: cache, react, server-components
- Language: TypeScript
- Homepage:
- Size: 35.3 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `@matthamlin/simple-cache`
A simple react-cache implementation that works for both Server Components and
Client Components!
## API
```tsx
// For use on the client, or in client components during SSR
import { useCache } from '@matthamlin/simple-cache/client'
let cache = new Map()
interface Result {
something: boolean
}
function useFetch(endpoint) {
return useCache(cache, endpoint, () =>
fetch(endpoint).then((data) => data.json()),
)
}
```
Or with Server Components (experimental):
```tsx
import { useCache } from '@matthamlin/simple-cache/server'
let cache = new Map()
interface Result {
something: boolean
}
function useData(endpoint) {
return useCache(cache, endpoint, () =>
fetch(endpoint).then((res) => res.json()),
)
}
```
### `useCache` Arguments:
- `cache` - A cache, expects the same api as a `Map`
- `key` - A unique key (string) to index the cache by
- `miss` - A function that returns a promise to suspend (function)
### Recipes:
#### Sharing a cache between the server and the client:
> **Note**
> I haven't done extensive testing with this approach, but it could
> work!
The `server` entrypoint also exports a `serializeCache` function that takes in
the `cache` and returns a stringified representation of the cache. It's up to
you to pass that data down to the client, one possible approach is a ``
tag injected alongside the component that suspended on the server!
On the client, you can import `deserializeCache` from the `client` entrypoint
and pass that stringified representation to it to get back the `cache` which you
can pass through to all `useCache` calls.
As long as the keys are equivalent, this should allow you to avoid double
fetching on the client.
<!-- prettier-ignore -->
> **Note**
> This doesn't yet work for _pending_ `useCache` calls, not that I'd
> expect the server to flush those to the client 🤔
### Built Using:
- Typescript
- Babel