https://github.com/azu/react-fetch-no-cache

React/Next.js fetch function without cache
https://github.com/azu/react-fetch-no-cache

cache fetch nextjs nocache react

Last synced: 1 day ago
JSON representation

React/Next.js fetch function without cache

• Host: GitHub
• URL: https://github.com/azu/react-fetch-no-cache
• Owner: azu
• License: mit
• Created: 2024-02-27T15:29:42.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-02-27T15:34:41.000Z (7 months ago)
• Last Synced: 2024-05-02T00:21:16.969Z (5 months ago)
• Topics: cache, fetch, nextjs, nocache, react
• Language: CSS
• Homepage:
• Size: 25.4 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-fetch-no-cache

> React's `fetch()` without caching

This is a simple wrapper around the `fetch()` function for React/Next.js.

The library provide a `fetch()` function that prevents caching by React/Next.js.

## How it works

React/Next.js has two-cache layer for `fetch` API.

- [Building Your Application: Caching | Next.js](https://nextjs.org/docs/app/building-your-application/caching)

### Disable caching for Request Memorization

> To opt out of memoization in fetch requests, you can pass an AbortController signal to the request.  

> [Building Your Application: Caching | Next.js](https://nextjs.org/docs/app/building-your-application/caching)

See also 

### Disable caching for Data Store

> For individual data fetches, you can opt out of caching by setting the cache option to no-store. This means data will be fetched whenever fetch is called.  

> https://nextjs.org/docs/app/building-your-application/caching#opting-out-1 

## Installation

```sh

npm install react-fetch-no-cache

```

## Usage

Use `fetch` as you would normally use `fetch` in a React/Next.js application.

```ts

"use server";

import { fetch } from "react-fetch-no-cache";

export const fetchCurrentTime = async () => {

    // fetch time from the server without caching

    const res = await fetch("https://worldtimeapi.org/api/timezone/Asia/Tokyo");

    const json = await res.json();

    return json.utc_datetime;

}

```

## Tests

```shell

cd example

npm install

npm run dev

```

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

## License

MIT