Progressive loading
Stream UI shell instantly, hydrate content as it arrives — no spinners, no layout shift.
Why progressive loading
Users abandon slow pages. With progressive loading, Meridian sends the page skeleton in under 100ms, then streams data-bound components as each API resolves. The result is a page that feels instant even when backend calls take 800ms.
The shell-first pattern
Wrap slow components in React Suspense boundaries. The shell renders immediately; fallback content shows while the component waits for its data promise.
return (
<Shell>
<Suspense fallback=<Skeleton /> >
<SlowComponent />
</Suspense>
</Shell>
);
}
Streaming with Server Components
Mark the page as async. Fetch data inside the component. Next.js streams the HTML as the promise resolves — no client-side waterfall.
Skeleton sizing
Match skeleton dimensions to the final content. Use min-height on the Suspense boundary to prevent layout shift when content pops in. Aim for zero Cumulative Layout Shift.
Meridian tip: Combine progressive loading with stale-while-revalidate caching. The shell loads from cache in <50ms while fresh data streams in the background.