Skip to main content

Data Fetch ↔ (process) to Async GET data from Server

aka Fetch-Data

Server State​

state store on Backend RASP (Remote Async Shared Persistent)

Client State​

state store by Client (Browser), TSC

Overfetch​

(process) to Data Fetch & get extra unused data

Underfetch​

(process) to Data Fetch incomplete data per req, waste extra reqs

Prefetch​

(process) to Data Fetch in advance anticipation of future need

REST is prone to Overfetching & Underfetching which is non-deal when scaling

Network Waterfall​

to load data in Synchronous Blocking stages

Dedupe​

to prevent duplicate Reqs, avoid fetch same data

HTTP Caching​

(process) to store HTTP Response to reuse for subsequent Reqs

Caching​

(process) to store data for reuse

Retries​

to repeat fetch, for given limit number of attempts & interval

Revalidation​

(process) to purge HTTP Cache & re-fetch fresh data

Parallel Data Fetch​

to init Reqs ASAP & load Concurrently

Sequential Data Fetch​

(default) to Data Fetch with routes dependent on each other - lead to Waterfall cascade

REST​

(standard)(model)(Paradigm) Client-Server Architecture to organize stateless Cachable Data Fetch

SOAP​

(standard)(model) alternative to REST to transfer messages/small data over HTTP as XML

Data Fetch Library Solutions

References​

  1. Overfetch ↔ (process) to Data Fetch & get extra unused data

  2. Underfetch ↔ (process) to Data Fetch incomplete data per req, waste extra reqs

  3. Prefetch ↔ (process) to Data Fetch in advance anticipation of future need

  4. Move Data Fetch to Server-Side ↔ ( Next 13 ) to Collocate Data Fetch ops in Server Component for Sync perf

  5. Sequential Data Fetch ↔ (default) to Data Fetch with routes dependent on each other - lead to Waterfall cascade

  6. Static Fetch ↔ (process) to Data Fetch at build time, to Cache & reuse for future request

  7. Next Data Fetching ↔ Opinionated Design Patterns in Next.js for Data Fetch situations

  8. Async ↔ of Server State takes time to Data Fetch & delay access

  9. useAsync() ↔ async Custom Hook to return value, error, status of Data Fetch

  10. REST ↔ (standard)(model)(Paradigm) Client-Server Architecture to organize stateless Cachable Data Fetch

  11. @apollo/client ↔ JS state management lib to manage local/remote data via Declarative GraphQL Data Fetch

  12. SWR ↔ React Lib to Data Fetch for client-side, handle Cache/Revalidate/Retries Front-End App (JS)

  13. axios ↔ popular library to Data Fetch, when Fetch API was worse - now no longer needed?!

  14. createAsyncThunk() ↔ RTK API fn to Data Fetch from remote endpoint

  15. @reduxjs/toolkit/query ↔ RTK query API to Data Fetch/Cache & replace Thunk

  16. Fetch API ↔ Web API to Data Fetch Web Resource via async Promise

  17. experiement_use ↔ React API to allow Async Data Fetch inside Server Component

  18. AJAX ↔ (process) to Asynchronous Data Fetch from Server (via clunky legacy XHR methods)

  19. Shallow Route ↔ (feat) to change URL w/o repeat Data Fetch for current Page