I am building my first next js 14 website, its going well. However I am having trouble with slow speeds generating blur URLs for my images.

This part of the code is taking quite a few seconds to process, so the page hangs for a while before loading in.

  if (data?.gallerySingle) {
        const gallerySingleUrl = urlFor(data.gallerySingle).url();
        data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl);
    }

What would be a better way to generate the blur URLs? Should I do it on the client side instead? Or can you see any issues with the code below?

async function getPageData(slug: string) {
    const query = `
    *[_type == "fleet" && slug.current == '${slug}'] {
        "currentSlug": slug.current,
          title,
          mainImage,    
          threedVideoUrl,
          "gallerySingle": gallerySingle.asset->{
            _id,
            url,
            metadata {
                dimensions {
                    width,
                    height
                }
            }
            },
      }[0]`;
    const data = await client.fetch(query);

    if (data?.gallerySingle) {
        const gallerySingleUrl = urlFor(data.gallerySingle).url();
        data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl);
    }
    return data;
}

Using: https://plaiceholder.co/ to generate the dase64 blur data

Thank you!