Problem

My team deploys a Nuxt project using Serverless. In a previous post, I introduced fetch and asyncData as SSR data fetch hooks in Nuxt ([📍[Nuxt] The Difference Between asyncData and fetch). However, when using the fetch hook, we encountered a problem where a 500 error occurred, preventing the page from rendering. Using AWS CloudWatch, we discovered that a 413 error was occurring.

413 Request Entity Too Large

A 413 error occurs when the request size exceeds 10MB. Investigating why a simple GET request would exceed 10MB, I found that the header contained an excessively long x-apigateway-event.

Solution

Since there was no code in the frontend setting the x-apigateway-event header, and the issue only occurred in the deployment environment (not locally), I deduced that the problem lay in the deployment environment.

While reviewing the serverless-related content, I searched for the serverless-nuxt package in handler.js on npm and found:

const { createNuxtApp } = require('serverless-nuxt')
const config = require('./nuxt.config.js')

module.exports.render = createNuxtApp(config)

The package was deprecated. Therefore, I installed nuxt-aws-lambda and modified handler.js as follows:

const { createNuxtHandler } = require('nuxt-aws-lambda')
const config = require('./nuxt.config.js')

module.exports.render = createNuxtHandler(config)

After deploying, the x-apigateway-event header disappeared, and the 413 error was resolved.

It took me over three days to solve this problem. Initially, I assumed the issue was due to incorrect usage of the fetch hook and kept modifying the logic. However, I realized that when a problem only occurs during deployment, it is essential to check the deployment logic.

Additionally, errors occurring in SSR are displayed as 500 errors on the frontend, making it difficult to diagnose the exact issue. Solving this error taught me how to check for errors in the deployed app using AWS CloudWatch.