-1

I am building react app that is about video tutorials. I am planning to store around 40-60 videos around 40-50 MB each in public folder of my react app. Is that good approach, will that affect performances of react application?

If yes, what would be alternative approach? I would use Azure as cloud provider, would storing videos in Azure Storage and playing/streaming them through react-player be an good approach in terms of performances?

I would exclude youtube since it has embeded controls which I can not disable using react-player.

los pollos hermanos
  • 187
  • 2
  • 17

2 Answers2

0

Generally speaking, the only reason static files would affect app performance is if the disk was nearly full and lacked space for cache, paging, etc. Otherwise it's not a factor.

Most of a React app is in browser memory and cache anyway. You're only really talking about other static files (the compiled React app) being served anyway. Video files aren't loaded unless they're retrieved by your app when they're played. The only files loaded initially are the app itself.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I was thinking when loading the page for the first time, downloading of all those files would be an issue – los pollos hermanos May 16 '23 at 20:42
  • All what files? Video files aren't loaded unless they're retrieved by your app when they're played. The only files loaded initially are the app itself. – isherwood May 16 '23 at 20:43
  • Hmm I was not aware of that, so basically client (the browser) would need only to download videos that are being played through react-player? One by one as they are being started, not all in once? – los pollos hermanos May 16 '23 at 20:44
  • Right. You don't get all 40 zillion YouTube videos when you load youtube.com, either. :P – isherwood May 16 '23 at 20:46
  • Yeah, you are right, but youtube is a streaming platform where you are constantly "downloading" the content. Dont know how public folder of React app works, I'm new to react, but thanks for your response :) – los pollos hermanos May 16 '23 at 20:50
  • The public folder is just a folder that React knows about and has access to. That's it. It's no different from any other server location, otherwise. – isherwood May 16 '23 at 20:55
0

It depends on your hosting solution. Check to make sure that the tool you are using allows you to deploy and download files of that size. Most should, but you may run into issues with tools that are built on serverless platforms.

If you plan to frequently change these files, or support this project long term, you should look into using a tool like azure file storage or amazon S3. This will be more efficient and cheaper than storing your files directly inside a platform designed for application hosting.

Dan Monego
  • 9,637
  • 6
  • 37
  • 72
  • Videos will not be changed frequently, probably never, once in a while. What do you mean by support project long term? What are the differences using this approach in terms of short term and long term support? – los pollos hermanos May 16 '23 at 20:52
  • That's just with respect to cost. If it's a short-term project it may not be worth setting up static server space. If it's going to be there a while, static file storage is cheaper than application storage. – isherwood May 16 '23 at 20:56
  • You are saying that cost of hosting my react application will be affected if I have 50 videos of 50 MB in public folder of the app? Do you know how much it will be affected approx? – los pollos hermanos May 16 '23 at 21:20
  • IDK man, it's your project. Given the lines of questioning you're taking, I recommend that you just build it. This site will be here to help if you run into problems doing that. – Dan Monego May 17 '23 at 16:09