Benchmark: Fetch cache (default) vs no cache (no-store)

HTML Preparation code:

<div id="test"></div>

Tests:

Fetch (default)
fetch('https://jsonplaceholder.typicode.com/todos') .then((response) => { return response.json(); }) .then((data) => { console.log(data); });
Fetch (no-store)
fetch('https://jsonplaceholder.typicode.com/todos', { cache: 'no-store' }) .then((response) => { return response.json(); }) .then((data) => { console.log(data); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fetch (default)
Fetch (no-store)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Fetch (default)	19364.8 Ops/sec
Fetch (no-store)	17765.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for fetching data using the `fetch` API in JavaScript:

1. **Fetch with cache**: This approach allows the browser to store the response from the server, so that subsequent requests for the same resource can be served directly from the cache.
2. **Fetch without cache (no-store)**: This approach forces the browser to always revalidate the response from the server on every request, even if it's a repeat of a previous request.

**Options Compared**

The benchmark is comparing two options:

* `cache`: a boolean flag that enables or disables caching for the fetch request.
	+ Pros:
		- Can improve performance by reducing the number of requests to the server.
		- Can help with page loading times and reduce latency.
	+ Cons:
		- May not be suitable for all use cases, such as APIs that require revalidation on every request.
* `no-store`: a caching strategy that forces the browser to always revalidate the response from the server on every request.
	+ Pros:
		- Ensures data consistency and accuracy by always revalidating the response from the server.
	+ Cons:
		- May have performance implications due to increased number of requests to the server.

**Library Used**

In this benchmark, no specific libraries are used beyond the built-in `fetch` API and JavaScript's `console.log` function for logging data.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. It's a straightforward comparison of two caching strategies using the `fetch` API.

**Benchmark Preparation Code**

The preparation code provided is minimal, consisting only of HTML and JavaScript code to fetch data from a JSONPlaceholder API:
```javascript
fetch('https://jsonplaceholder.typicode.com/todos')
  .then((response) => response.json())
  .then((data) => console.log(data));
```
This code simply fetches the `/todos` endpoint, parses the response as JSON, and logs the data to the console.

**Other Alternatives**

If you want to explore alternative caching strategies or implementations, here are a few options:

* **Cache-Control headers**: Instead of using the `cache` option in the `fetch` API, you can use Cache-Control headers on your server-side implementation. This allows for more fine-grained control over caching behavior.
* **Local storage**: You can store cached responses locally using local storage or session storage. However, this approach may not be suitable for all use cases due to security and consistency concerns.
* **CDN caching**: If you're serving static assets from a Content Delivery Network (CDN), you can leverage their caching capabilities to reduce the load on your server.

Keep in mind that these alternatives may require additional setup and configuration, depending on your specific use case.

Related benchmarks:

Fetch cache (default) vs no cache (no-store) (version: 0)

Comparing performance of: Fetch (default) vs Fetch (no-store)

Created: 6 years ago by: Guest

Jump to the latest result

Fetch (default)

Fetch (no-store)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):