data-fetching-patterns

Optimizing data fetching for SSR and SSG involves selecting efficient loading patterns like fetch-then-render or render-as-you-fetch to minimize waterfalls and improve initial load performance. This Skill guides implementing these strategies across server and edge compute environments.

Fetch on render triggers requests during component rendering, fetch then render waits for data before displaying, and render as you fetch initiates loading earlier to overlap network and render phases. These patterns dictate how data fetching impacts perceived application speed.

Using Suspense boundaries with skeletons involves wrapping components to progressively render content, replacing standard loading states with skeleton placeholders while data streams. This technique significantly improves perceived performance by showing immediate UI structure.

The best way to handle parallel versus dependent data requests is to identify independent queries for concurrent fetching and await dependent requests sequentially. This Skill provides guidance on combining these request structures to optimize loading performance.

Yes, this data fetching guidance applies to Incremental Static Regeneration (ISR) and client-side rendering scenarios. It covers strategies across various rendering models, including server-side, edge compute, and progressive rendering techniques.

You should use caching and streaming over standard client-side loading when optimizing initial load and handling complex data fetching workflows. These techniques reduce redundant requests and progressively send HTML chunks to the browser for faster perceived load times.