NextJS errorMessage: "Response payload size exceeded maximum allowed payload size (6291556 bytes)"

Question

It seems the response from my API request payload is much in terms of size, whenever I visit the page where this response is rendered, I get this message

{
"errorMessage": "Response payload size exceeded maximum allowed payload size (6291556 bytes).",
"errorType": "Function.ResponseSizeTooLarge"
}

How am I supposed to manipulate this response to avoid this error on my NextJS application?

Answer 1

There are two parts to this issue,

1. How do you handle the error from showing up

If you are in control of the API

Check for the response length and send appropriate headers - see https://stackoverflow.com/a/61504772/13749957

If you are not in control of the API

This is just your application handling the error and looking for the errorType and informing the user - If you have a mechanism to get a summarized or a fallback api use that.

2. If you are in control of the API, compressing or manipulating the response.

1. If the response payload is binary - say an asset, you could look at compression before sending or via a transcoder like cloudinary to get a smaller response.

2. If the response payload can be gzipped and isn't already, gzip it before sending.

This article discusses how to get a gzip going on api's https://techblog.commercetools.com/gzip-on-aws-lambda-and-api-gateway-5170bb02b543