I am writing e2e tests for an SSR nextjs application using cypress. Once components rendering is asynchronous, naturally Cypress understanding that DOM is ready before many components rendering. It implies that timeouts start to count much before many components start to rendering.
The application has non-homogeneous components loading time. Sometimes it takes a lot of seconds to load components, sometimes it loads it very fast. It happens because of the API architecture, that uses a Redis cache mechanism and responds very fast if data is already stored in the in-memory database. There is not the option to do any structural change in the API. And it happens in other projects too.
I know two approaches that help to wait for slow component loading: cy.wait and global and methods' timeout, such as cy.get timeout parameter. Usually, I put a very high timeout in these parameters. Even though, sometimes tests fail because the timeout is reached.
Choosing very high timeout times makes the test very time-consuming if really exists an error. It also generates insecurity with the results, since it raises the possibility that the maximum time has been reached and it not necessarily is an application failure.
There exist a better way or approach to handling this kind of situation?