webb-dapp icon indicating copy to clipboard operation
webb-dapp copied to clipboard

[TASK] Optimize API requests approach in landing page

Open yurixander opened this issue 1 year ago • 2 comments

The current implementation for API requests is temporary and may need to be better optimized to reduce initial page loading time for better SEO, as well as minimize the amount of API requests made.

Here are some different approaches and ideas that can be taken:

  1. Initial API request to gather all items and then filter locally

    • Pros: Single API request. Good for databases that are not excessively large.
    • Cons: Not suitable for large datasets. Data needs to be refreshed, or it can become stale.
    • Optimization: Caching strategies like localStorage may help offset initial load times on subsequent visits. Streaming the data could also be a great optimization: User gets initial page(s) of items quickly, caches it, and does not need to make frequent susequent API requests.
  2. Re-fetch items when constraints change

    • Pros: Always provides most up-to-date information. Constraints apply to ALL available projects/circuits on the backend, which is what the user would expect.
    • Cons: Higher load on the backend.
    • Optimizations: Ratelimiting can be used to prevent abuse. Also, debouncing and batching can be added to constraints to make less API requests.
  3. Gather a limited amount of items, and re-fetch more as needed

    • Pros: Balanced performance. Good for improving initial project load times, and more suited to larger datasets.
    • Cons: Filtering, sorting, and constraints are limited to the loaded subset of data, which might not represent all that is available. This could lead to users occassionaly not finding what they're looking for, even though it does actually exist.
    • Optimizations: Pagination can be used to load more data as needed.

Notes

  • I've added debounce time and minimum length for the search query input as a starting point for performance.
  • We could batch filter/constraints by having the user trigger the request manually via a button.
  • Could also take an approach where we fetch all results matching the search query, but then apply constraints/filters locally. This way, we only re-fetch when the search query itself changes.

yurixander avatar Dec 28 '23 19:12 yurixander