Best practices for optimizing data fetching in Freedom UI page logic

Level: intermediate

Custom Freedom UI pages frequently require data loading from APIs, web services, or objects. Without proper data fetching strategies, pages might experience increased load times, unresponsive UI, and redundant network requests, especially on complex or dynamic pages.

This article summarizes recommended techniques for optimizing data fetching in Freedom UI page logic. These best practices help to:

• speed up initial page rendering
• prevent redundant or overlapping fetch calls
• improve the overall user experience in high-load environments

Common data fetching scenarios within Freedom UI page logic, along with recommended strategies and expected outcomes, are listed in the table below.

Optimization area	Use case	Recommended approach	Expected outcome
Sequential data fetching	Multiple independent requests are executed one after another	Fetch data in parallel using Promise.all() or equivalent methods	Reduces total load time and improves perceived responsiveness
Duplicate network requests	Same data is requested in multiple components or methods	Cache or share a single fetch result or promise	Minimizes network usage and ensures consistent data
Frequent access to rarely changing data	Static reference data is fetched repeatedly	Store results in memory, local storage, or external caches, for example, Redis, and configure HTTP caching headers or use a CDN to cache API responses and static content.	Speeds up repeated access and reduces server load
Need for fast response and fresh data	A fast response is required while data must remain current	Use a stale-while-revalidate caching strategy that displays cached data and refreshes it in the background	Balances fast UX with data freshness
Heavy initial page load	All required initial data is loaded before the UI becomes interactive	Defer non-critical data loading until user interaction	Improves first contentful paint time and reduces visual blocking
Predictable navigation paths	Navigation paths are predictable based on workflow structure	Prefetch or preload related data in advance	Reduces perceived latency and improves UI responsiveness
Handling slow or hanging requests	A data request exceeds acceptable latency thresholds or fails to complete	Set a timeout to stop or ignore fetches that take too long to complete	Prevents the UI from freezing and improves responsiveness
Large or verbose responses	APIs return more data than is needed	Apply filters, field selection, or pagination in API calls	Reduces payload size and parsing time
Multiple small API requests	Many small network calls happen in quick succession	Combine them into batched requests	Lowers round-trip overhead and speeds up delivery

Following these practices during development helps ensure that components fetch data efficiently, behave predictably, and remain easy to maintain as the app evolves.

---

Resources

Data Fetching Patterns in Single-Page Applications (official Martin Fowler documentation)

How to fetch data in React with performance in mind (official Developer Way documentation)