title: React async data fetch does not fetch data on static build
body: <ul>
  <li>I'm building a static site using <a href="https://www.sanity.io/" rel="nofollow noreferrer">Sanity.io</a> and <a href="https://www.gatsbyjs.org/" rel="nofollow noreferrer">Gatsby.js</a>.</li>
  <li>The data is hosted through Sanity and I'm fetching it via <a href="https://www.sanity.io/docs/groq" rel="nofollow noreferrer">GROQ</a>.</li>
  <li>Host and build is on <a href="https://www.netlify.com/" rel="nofollow noreferrer">Netlify</a>.</li>
  </ul>
  <p>The problem is that when I build I only get a rendered result of <code>Loading</code>. It does work in development. (which, I'm sure is because of hotloading)</p>
  <p><strong>How would I build a render a (async) data fetch for a build?</strong> I don't want to have this in a <code>componentDidMount()</code> or <code>useEffect()</code> Because from what I understand then the query would be client side. that would result in an API request for every page load, right? I just want one on build instead.</p>
  <p><strong>Can I pause the build/render just as long as it has no data yet?</strong></p>
  <p>Below is my simplified code</p>
  <pre><code>    import React from &quot;react&quot;
      import useSWR from &quot;swr&quot;
      import client from &quot;../../../../../sanityClient&quot;
      import BlockCarousel from &quot;../blockCarousel/blockCarousel&quot;
      
      const BlockCarouselBlog = ({ block }) =&gt; {
        const skip = 0
        const limit = block.itemAmount ? block.itemAmount : 10
        const params = { skip, limit: skip + limit - 1 }
        let {
          data,
          error,
        } = useSWR(
          '*[_type == &quot;blog&quot;] | order(_createdAt asc) [$skip..$limit]',
          query =&gt; client.fetch(query, params)
        )
      
        if (error) console.log(error)
        if (!data) return &lt;div&gt;Loading&lt;/div&gt;
      
        block.blocks = data
      
        return &lt;BlockCarousel block={block} /&gt;
      
      }
      export default BlockCarouselBlog
  </code></pre>