Considering that I already have a Convex application, what are the advantages of using Convex File Storage over, say, Cloudflare R2?
#Convex file storage advantages over Cloudflare R2
sacred quest
@glad turtle - Considering that I already have a Convex application, what are the advantages of using Convex File Storage over, say, Cloudflare R2? Is it mostly about referencing the files in my Convex database?
glad turtleBOT
Let me check the knowledge base for you. One moment! :books:
Convex File Storage simplifies the process of implementing file upload in your application. It allows you to store files from and send files to third-party APIs, and serve dynamic files to your users. All file types are supported. You can upload files to store them in Convex and reference them in your database documents. You can also store files generated or fetched from third-party APIs, serve files via URL, delete files stored in Convex, and access file metadata. You can manage your stored files on the Convex dashboard.
While the knowledge sources do not provide a direct comparison with Cloudflare R2, the integration of Convex File Storage with the Convex platform could provide a more seamless experience if you're already using Convex for your application. This is because you can easily reference the files in your Convex database, which could simplify your development process.
However, it's important to note that Convex File Storage is currently a beta feature. If you have feedback or feature requests, Convex encourages you to let them know on their Discord community.
For more information, you can refer to the Convex File Storage documentation (https://docs.convex.dev/file-storage).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sacred quest
@glad turtle - What are some best practices to minimize my file bandwidth for my Convex app? If I store my app logo in Convex File storage, does Convex cache my app logo so that it is not repeatedly counted as file bandwidth?
glad turtleBOT
Let me check the knowledge base for you. One moment! :books:
Convex does not currently cache files like your app logo, so each fetch from the file storage would count towards your file bandwidth. As per the Discord support thread (https://discord.com/channels/1019350475847499849/1108018329010049034), images currently come straight from S3 every time and are slower than they'd like. However, they have future plans to tie Convex's existing read-only query cacheability semantics with things like storage fetches so that you get CDN-type benefits from every bit of data inside Convex.
In the meantime, there are some strategies you can use to minimize file bandwidth:
-
Browser Cache Headers: Convex sets some browser cache headers, so a given user shouldn’t have to download the file twice. However, if you’re returning it from an httpAction, you’ll have to set those cache headers yourself.
-
Preloading: For use cases where you know which files will be needed ahead of time, you can preload the files by creating image tags in JavaScript, so they can be downloading before they’re shown to the user.
-
Third-Party Storage: If the built-in storage doesn't work for your needs, you could consider using a third party to store and serve content, and do the business logic & authorization in Convex.
Remember that Convex's query functions are deterministic and automatically cached. If you call the same query again with the same set of inputs, you will get the data back faster because it’s already cached. This does not apply to file storage, but it's a useful feature to keep in mind for optimizing your app's performance overall. You can learn more about this in the Convex documentation (https://stack.convex.dev/platform-you-need#caching).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
marble glen
<@1072591948499664996> - What are some best practices to minimize my file bandwi...
why would you store your app logo in convex. convex is for dynamic data ig and your app logo is stale data. you can host it together with your website
sacred quest
Yeah I’d probably store my app logo in a hyper-optimized place eventually. I’m just getting started with Convex and a app logo is the first simple use case for me to explore the file system
And by the way, im not certain it’s optimal to host an app logo with a website either. I’m using next.js and Vercel. Maybe it’s best for me to host my app logo in Cloudflare R2. I haven’t researched this.
In fact I did initially try to use next.js image, the public directory, and also adhere to og specs. It was difficult to do and my image looked really grainy.
cobalt osprey
That's probably what you want, might have to play with some settings but Vercel is a good place for static files. It'll do things like inline small images, re-encode and resize images, etc.
marble glen
In fact I did initially try to use next.js image, the public directory, and also...
Interesting. If you used the <Image /> your images should have been optimized automatically I guess. You should not put your images in your public directory.
Try to import the image into your js/ts file and then pass the image object in the src={} prop.
Then do the tricks in this video:
marble glen
And even if you do not store your image with your website on Vercel you still would need the Image component to render the image
sacred quest
Nice let me take a fresh look at image storage soon
marble glen
Nice let me take a fresh look at image storage soon
That's the point. You don't have to store your static image in a special way. Just put it in your src folder and import it into your file
sacred quest
Ok, I thought this approach created more bandwidth use (ie does not compress as much), but this will be my next step to try. Thanks @marble glen