CODEWITHSUNDEEP
javascripthttpreactjsexpressfetch
Ingrid
Ingrid

Reputation: 33

Send/receive images in react with http

We are currently developing an application with a React frontend (and express server) and a Java backend. The application has to be able to send lots images and videos between the frontend and backend.

We have so far used fetch (https://github.com/github/fetch) to send images with formData from frontend to backend, but this is not working for sending the other way (backend to frontend) due to unimplemented formData in fetch. We are able to receive images as blobs, but want to send information with the files to reduce number of http requests.

Do anyone have any recommendations for what we should use to send and receive lots of images and videos? Libraries or suggestions?

Thanks a lot!

Upvotes: 3

Views: 942

Answers (1)

squgeim
squgeim

Reputation: 2351

I do not really see any issue with receiving data with multiple requests. One request sends the information of the image, with a link to the image and then then browser sends another request to fetch the image. This is the most common implementation that I've seen.

The perceived overhead of sending multiple requests to the server is not really an issue. Modern browsers do not open multiple tcp connections to the server -- they keep the connection open for some time to allow multiple requests without the overhead of opening new connections.

All modern web browsers use persistent connections, including Google Chrome, Firefox, Internet Explorer (since 4.01), Opera (since 4.0) and Safari. https://en.wikipedia.org/wiki/HTTP_persistent_connection

I assume what you are trying to do with "formData" for sending response to the browser is using content-type: multipart on the response. That is not really a common practice, and browser support looks inconsistent. Also, Is there a de facto or established reason why multipart HTTP responses aren't generally supported in browsers?.

What would really be advantageous to your use case, though, is adopting HTTP/2. HTTP/2 has much more features for persistent connections and multiple responses with the same connection.

With the new binary framing mechanism in place, HTTP/2 no longer needs multiple TCP connections to multiplex streams in parallel; each stream is split into many frames, which can be interleaved and prioritized. As a result, all HTTP/2 connections are persistent, and only one connection per origin is required, which offers numerous performance benefits. https://developers.google.com/web/fundamentals/performance/http2/

Upvotes: 1

Related Questions