Send Compressed Data From Spring Boot , Uncompress & read from ReactJS
Compression is a older topic, Typically we will be using it within our local machine
We can also send compressed data from our backend service and use it in frontend.
Compress Data
Create a method to compress a string, GzipOutputStream class helps to compress an item.
Setup API handler in Rest Controller
Create a method which produces application/octet-stream and returns byte array.
Install pako as a dependency
The response received from backend is raw stream. It should be downloaded as blob(Binary Large Object) from Javascript & uncompress the content through pako library
Install axios as a dependency
axios is used in this case to make http calls to return binary large object (blob). you can use any library or fetch api.
To Uncompress Blob
The received data from backend would be of type blob, we should be creating a method to read the compressed blob content to string.
Create a FileReader instance, read the blob with method readAsArrayBuffer, upon loading, uncompress the data with inflate method of pako library.
Make API call to Backend
Create a method to invoke the backend api with responseType set to Blob and use the method unzipBlobToString to uncompress it.
Display in React
Inititate the http call within createEffect block and display the result using state variable
Its meant as an answer for stackoverflow, Code can still be refactored !!!
