Client-side data fetching with SWR

Render loading UI in the query component, reveal results with Suspense, or provide fallback data from a Server Component.

Client-only queries

These searches start after interaction without server-provided data. One renders its loading state inline. The other uses a local Suspense boundary to coordinate when results are revealed.

Initial data from the server

The feature boundary provides an SWRConfig fallback. Because useSWR reads the same key, the profile can render with that value before client revalidation runs.

Route-scoped data

Coordinating the server and client caches

The tagged server read provides the SWR fallback. Marking read updates the browser cache optimistically, then the Server Action updates the tag so the next server read sees the change.