Tengo una plataforma Next.js. Al actualizar, la página tarda alrededor de 6 segundos en cargarse. Así que estaba depurando para averiguar dónde estaba el retraso para saber qué podía hacer para mejorarlo y descubrí que hay alrededor de 5 segundos de tiempo de inactividad.

Básicamente, de acuerdo con la herramienta de depuración de rendimiento de Chrome y Firefox, hay un período de tiempo de inactividad de 5 segundos entre cargar todo y comenzar a mostrar la primera página.

Estoy siguiendo todas las mejores prácticas para acelerar la plataforma, como memorizar componentes, cargar dinámicamente componentes que no necesitan renderizarse hasta que el usuario interactúa con ellos,...

Aquí está el gráfico circular de la herramienta Chrome Performance que muestra el tiempo de inactividad:

Quería averiguar dónde sucede esto, así que agregué algunos registros de la marca de tiempo en cada paso (_app.js, index.js, ...) y descubrí que entre la primera llamada de _app.js y la primera llamada de index.js, se encuentra la espera de 5 segundos.

Así que comencé a eliminar componentes (envolturas como proveedores, ...) uno por uno para averiguar si uno de ellos era la causa, pero ninguno afectó el tiempo de inactividad en más de 2 ms, mientras que hay alrededor de 5000 ms en alguna parte.

Mi pregunta es, ¿hay alguna forma de averiguar cuál es ese tiempo de inactividad o por qué la aplicación está esperando tanto tiempo para comenzar a renderizar o alguien tiene alguna idea de qué podría intentar para acelerarlo?

Editar:

Aquí hay una captura de pantalla de la cascada donde se muestra el tiempo de inactividad: No hay ninguna solicitud en el medio y ninguna otra solicitud está esperando un resultado. Uno termina, nada durante 5 segundos, luego comienza el renderizado.