I am making an audio visualiser.

To save on read requests to my S3 bucket, I would like to cache the audio data on the nextjs server and render it there.
I thought of this, intending to wrap it in a suspense boundary.

async function SoundWaveform(sound: Sound) {
    const blob = await fetch(sound.downloadUrl, { cache: 'force-cache' })
        .then(response => response.blob())

    return (<AudioVisualizer blob={blob} width={?} height={?} />)
}

The problem with this is:
- do canvases even work on the server? don't think so.
- how to determine the width and height of the canvas on the server
With these problems it's pretty clear that it's not really feasible to do this on the server, so I'm not really sure what to do!