Theo's Typesafe Cult•2y ago

How does a React component require data to render in a SPA

I watching Theo's video on SSR https://youtu.be/kUs-fH1k-aM?t=358 and around 5:58 he mentions that in a SPA a user doesn't see anything until the data is loaded, unless you've got loading spinners telling the user data is incoming. Having only every used fetch inside useEffect or React Query in SPAs, I've always fetched data once components have rendered. Can anyone show me an example of a component in a SPA that doesn't render until data is fetched? I don't know how this would look like exactly in a React component.

Theo - t3․gg

YouTube

Do you REALLY need SSR?

People kept asking if they needed Server Side Rendering so I made a video about why they do. In depth on React Server Components, Next.js, Remix and more. Lmk what you think! ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg Everything else (Twitch, Twitter, Discord & my blog): https://t3.gg/links S/O Ph4seOne for the a...

2 Replies

Jacob•2y ago

If I remember correctly he was talking about how when the server first responds with the HTML and then the JS, the user won't see updated data until hydration finishes

isaac_way•2y ago

function Page() {
  const query = useQuery(async ()=>fetchData());

  if(!query.data) return <LoadingSpinner/>;
  
  return (
    <Child data={query.data} />
  )
}

function Page() {
  const query = useQuery(async ()=>fetchData());

  if(!query.data) return <LoadingSpinner/>;
  
  return (
    <Child data={query.data} />
  )
}

not the best way to do it but this is an example component that renders only after the data is fetched

Gaming

Programming

How does a React component require data to render in a SPA