Data Fetching

Data Fetching with Caching

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 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 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.

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.

Last updated