Data Fetching

Data Fetching with Caching

React Query by TanStack

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

Pros

• Simplifies Data Fetching

• Automatic Caching

• Background Updates and Synchronization

• Built-in Support for Pagination and Infinite Scroll

• Automatic Garbage Collection

• Easy to Use with Other Libraries

• Developer Experience

• Server-Side Rendering (SSR) Support

Cons

• Learning Curve

• Bundle Size

• Overhead for Simple Use Cases

• Complex Configuration for Advanced Use Cases

• Dependency Management

• Potential for Over-fetching

• State Management Duplication

SWR

SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

Pros

• Stale-While-Revalidate

• Automatic Caching

• Built-in Support for Revalidation

• Minimal Configuration

• Optimistic UI Updates

• TypeScript Support

• Small Bundle Size

Cons

• Learning Curve

• Limited Features

• Complex Use Cases

• Potential for Over-fetching

• Lack of Built-in State Management

HTTP Requests

Axios

Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.

Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.