reactjs - React async data fetch が静的ビルドでデータをフェッチしない

Question

• Sanity.ioとGatsby.jsを使用して静的サイトを構築しています。
• データは Sanity を介してホストされており、GROQを介して取得しています。
• ホストとビルドはNetlifyにあります。

問題は、ビルドするとレンダリングされた結果しか得られないことですLoading。それは開発で機能します。（これは、ホットロードのせいだと確信しています）

ビルドのレンダリング (非同期) データ フェッチをビルドするにはどうすればよいですか? componentDidMount()これをorに入れたくありませんuseEffect()。私が理解していることから、クエリはクライアント側になるからです。これでは、ページが読み込まれるたびに API リクエストが発生しますよね? 代わりに、ビルド時に 1 つだけが必要です。

まだデータがない限り、ビルド/レンダリングを一時停止できますか?

以下は私の簡略化されたコードです

    import React from "react"
    import useSWR from "swr"
    import client from "../../../../../sanityClient"
    import BlockCarousel from "../blockCarousel/blockCarousel"
    
    const BlockCarouselBlog = ({ block }) => {
      const skip = 0
      const limit = block.itemAmount ? block.itemAmount : 10
      const params = { skip, limit: skip + limit - 1 }
      let {
        data,
        error,
      } = useSWR(
        '*[_type == "blog"] | order(_createdAt asc) [$skip..$limit]',
        query => client.fetch(query, params)
      )
    
      if (error) console.log(error)
      if (!data) return <div>Loading</div>
    
      block.blocks = data
    
      return <BlockCarousel block={block} />
    
    }
    export default BlockCarouselBlog