Reduce Client Bundle Size

[wottpal]

I was wondering if the noticeable client bundle size of next-cloudinary is justified somehow? I'm only using CldImage within a client component in this case.

Could the package maybe split into multiple parts?

[colbyfayock]

Hey @wottpal we're currently working on how this project is bundled and hope to improve this as part of that project, with part of the primary goal being to provide better support for using the components in RSCs. will update when we have more to share

[wottpal]

Nice, also the RSC part is great news.

A bit unrelated but speaking of RSC, I've built myself a server component wrapper around CldImage to support placeholder="blur" in Next.js. Sharing it here in case that's useful for anyone or even the core package:

const fetchImageDataUrl = unstable_cache(
  async (url) => {
    const response = await fetch(url)
    const arrayBuffer = await response.arrayBuffer()
    const base64String = Buffer.from(arrayBuffer).toString('base64')
    const mimeType = response.headers.get('Content-Type') || 'image/jpeg'
    const dataUrl = `data:${mimeType};base64,${base64String}`
    return dataUrl
  },
  ['image-data-url'],
)

interface CldImageWithPlaceholderProps extends ImageProps {
  src: string
}
export default async function CldImageWithPlaceholder({
  src,
  ...props
}: CldImageWithPlaceholderProps) {
  if (props.placeholder === 'blur') {
    try {
      const url = getCldImageUrl({
        src,
        width: 10,
        height: 10,
        format: 'jpg',
      })
      props.blurDataURL = await fetchImageDataUrl(url)
    } catch (error) {
      props.placeholder = 'empty'
      console.error(`Error fetching Cloudinary URL (${src}):`, error)
    }
  }

  return <CldImage src={src} {...props} />
}

[colbyfayock]

oh nice one! i did something somewhat similar in an example in this guide: https://next.cloudinary.dev/guides/placeholders

[wottpal]

Uh nice one, didn't saw that. would have saved me some time haha.

You can close this issue or use it to track the module restructurment progress – Feel free to handle it as you like.