TTC
Theo's Typesafe Cult•2y ago
Liam Idrovo

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
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
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

Did you find this page helpful?