First load of a product page takes 7 sec

[aidensgithub]

I appreciate the contributors behind these amazing projects!
I seem to have a weird issue, would be glad if someone could guide me on the debugging.
Apparently the first product page takes too long, I assume the database fetch. Let's put away the database problems first, I would appreciate any guides on making so that clicking on a product, at least loads the page first and loads whatever it needs later. Because when I click the first time, ther is no any visual feedback at least for 4 seconds. I might be wrong but I believe, most of the pages aren't well structured for initial server-side loading.

Open to your ideas.

For reference: The average ping with 32B to the database server from my localhost takes 90-100ms

Here is the networks tab

Desired behaviour is to meet these web vitals

[aidensgithub]

Some more stats

Here is the performance insight

Initial page loading request (light blue) states 14 seconds of wating

[mgomez-tubs]

The delay between pages is a nextjs development mode issue and you are testing metrics in development anyways so that doesn't really mean much. That being said, I have pushed this template to a production env for testing and the issue seems to be the largest contentful paint metric, which is bringing the PageSpeed performance score to 30, because of an LCS of 3.6s. I'm sure something can be done about it, but the current state of this template definitely needs improvement.