Open
Description
Problem
Our pages wait for all data to be fetched on the server before the HTML is streamed to the browser. That blocks the first paint and makes the app feel sluggish.
Why it matters
Single-page apps feel fast because static scaffolding (header, footer, table headings, etc.) is rendered immediately, while dynamic sections fill in once their data arrives. We’re missing that experience.
What Remix offers
Remix supports deferred data loading with React Suspense, letting us send the shell first and stream data-driven components later. Docs: https://remix.run/docs/en/main/discussion/pending-ui#deferred-data-loading
Proposal
- Audit routes that fetch data server-side.
- Introduce
defer()+<Await>/<Suspense>to stream content progressively. - Add a lightweight loading UI for deferred sections.
- Measure TTI / Core Web Vitals before and after to confirm the win.
Expected outcome
Users see the page frame instantly, with content filling in as data arrives—no more blank-screen wait.