Data Fetching + React 18 Streaming Demos

Client Side Data Fetching with Suspense Demo

Not using Streaming

Renders on the server up to the suspense boundary, and then the ClientSideDate component handles loading the data via a suspense enabled library (SWR).

The date is: No Server Value

Client Side Loaded

The difference between this and the SSR with streaming demo is that in this demo, the request is sent from the browser, and in the SSR demo it's sent from t he server

This approach suffers from the same drawbacks as the Client Side effect demo, but also has the same advantages

import {ClientSideDate} from 'ClientSideDate.client.tsx';

<Suspense fallback={<h3>Server Side Fallback</h3>}>
      {<ClientSideDate />}
</Suspense>

//ClientSideDate.client.tsx
export function ClientSideDate() {
  const value = useAsyncValue();
  const [date, setDate] = useState<string>("initial data");
  const swrDate = useSWR("date", async ()=> await getDate(), {suspense: true, fallbackData: value})
  return (
    <DateFn date={swrDate?.data} />
  )
}