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!