In the ever-evolving landscape of digital experiences, Sitecore JSS (JavaScript Services) combined with Next.js has emerged as a powerful duo for building headless websites. This approach provides flexibility, scalability, and performance. However, as with any technology, challenges may arise.
In this blog post, we'll delve into one such challenge: the "Connection to Your Rendering Host Failed with a Body Exceeded 2MB Limit" error and how to tackle it effectively.
Understanding the Error
We have deployed our Next.js app on Azure Web App and we started to get the “Connection to your rendering host failed with a Body exceeded 2mb limit error. Ensure the POST endpoint at URL https://mynextjs-sitecore-test.azurewebapp.net/api/editing/render has been enabled” error. Its typically occurs when a request made to the Sitecore rendering host exceeds the predefined request size limit. This limit is set at 2MB by default to prevent excessively large requests from overwhelming the server and causing performance issues.
When building a Sitecore JSS-based headless website with Next.js, it's common to transfer data between the front end (Next.js) and the back end (Sitecore) using API calls. These API calls may involve sending large payloads, especially when dealing with extensive content or complex data structures.
Solutions
Once you've diagnosed the issue, it's time to implement a solution. We try to solve it in lots of
different way, but ultimately the solution that work for us is
• Open “\src\pages\api\editing\render.ts” file and change size from 2 MB to 50 MB as
export const config = {
api: {
bodyParser: {
sizeLimit: '50mb',
},
responseLimit: false,
},
};
• Open “\src\pages\api\editing\data\[key].ts” file and change size from 2 MB to 50 MB as
export const config = {
api: {
bodyParser: {
sizeLimit: '2mb',
},
responseLimit: false,
},
};
• Build and deploy your application, it should work now.
I hope this trick may solve your problem as well. Happy coding!
