reactjs - Understanding formation of Request Headers

Question

I am running a NextJS application, and I observed that JavaScript resources are not getting gzipped on mobile (on desktop it works fine). On further debugging, I found that this is because the Request Headers in mobile are not sending the Accept-Encoding header. These JS files are basically chunks (bundles of JS code) downloaded using a <script> tag. Now I understand that there is no way to add Request Headers to a <script> tag, but I can see that the Accept-Encoding headers are present when running the app in desktop resolution.

So I want to understand where are these Request Headers (specifically Accept-Encoding) added to outgoing JavaScript file requests? Is it automatically added by the browser when making a request, or added by NextJS, or WebPack (embedding it when sending the html page for the first time to client)? And how can I fix this issue? Note that I observe this behaviour even on my local machine running on localhost:3000.

Answer 1

That header is set by the client and it is used to tell the server what kind of content encoding ( compressions algorithm ) it can understand, so basically the client will get the gzipped files if it declares that it can accept them, and the server is able to serve them (nextjs has gzip compression on by default).

Mdn Docs Accept-Encoding

Next.js Docs gzip