What is Remix's defer and Suspense streaming?
Answer
Remix supports streaming via React 18 Suspense and the defer utility — allowing fast initial HTML to stream to the browser while slow data loads in the background. Without defer: the loader awaits all data before sending HTML — the user waits for the slowest query. With defer: export async function loader() { const fast = await getFastData(); const slow = getSlowData(); // NOT awaited return defer({ fast, slow }); }. The fast data is available immediately. In the component: const { fast, slow } = useLoaderData(); return <div><FastContent data={fast} /><Suspense fallback={<Spinner />}><Await resolve={slow}>{(data) => <SlowContent data={data} />}</Await></Suspense></div>. The browser receives the initial HTML shell immediately, then receives the deferred data as it resolves. This dramatically improves Time to First Byte (TTFB) and perceived performance for pages with some slow data.