Serving images (.jpeg, .png) in React App

Questions / Help
1

Hi, for a React app is the recommended way to serve .jpeg and .png images for a homepage to leave it in the project file and bundle everything in the container, or should I host the images externally using a service such as S3?

What are the tradeoffs for each approach and is there a point where you’d switch from one method to the other? Thanks for your help!

3

Hi there!

It seems you definitely want to cache your statics using our [[statics]] config.

I’ve gone ahead and created an example for you:

Edit: as for when to use s3, you’d probably want this to host non-static images (like file uploads).

From Fly you can benefit from multi-regional deployments :slight_smile:

1 Like
4

Hi lubien,

Thanks for creating the example!

In the example the fly.toml file [[statics]] has the url_prefix = "/", and the index.html is inside the root of the build folder

fly.io example build folder

However for a next.js app the build folder is instead the .next folder with the following structure

Next build folder
Next build folder255×905 37.3 KB

with no index.html in the root of the .next folder. In this case should url_prefix still be = "/"?

5

I see, it’s a NextJS app!

The answer depends on how you use NextJS. Are you using it statically or with SSR?

The reason I’ve added [[statics]] to the root on my CRA example is because everything there is static!

Since NextJS has this static folder inside it you might want to map it almost like this:

[[statics]]
  guest_path = "/path/to/static/"
  url_prefix = "/static"

Can you give it a try?

6

Hi lubien,

Just tried deploying using url_prefix = "/static" and images are loading as expected.
Since the images also load when I previously deployed without [[statics]] does using [[statics]] offer a speed/bandwidth benefit?

Right now the app is only serving static files but in the future if I use SSR would the new url prefix be
url_prefix = "/server"?

7

It should give you some speed and make you have less load as it skips your web server and serves the file directly from our cache system.

I’m not that knowledgeable of NextJS to give you a sure answer (I leave that to our amazing community) but you probably would want to cache only static things (images, js, CSS…) as [[statics]] tells Fly we don’t need to hit your server for these but not cache your paths on the app like yourapp.com/ and yourapp.com/about. Hope this helps

8

Got it. I’ll stick with statics for now and ask the community when there is a need for SSR.

Thanks so much for your help!

1 Like