Code stack you are integrating Builder with
NextJS
Reproducible code example
We are using a QA and a PROD environment in builder.io and in both environments we are exceeding the bandwidth. When we search for the requests that are using the most data, we see 99% of the usage is coming from our top and bottom navigations.
The first problem is those URLs are from the REST API, which we are not using. We are using the graphql one, but there is not a single request from the graphql URL, only REST URLs.
And the second, bigger problem is each fetch from the top and bottom navigations is ~200kb so it is very strange that we end up with 10GB overall, mainly from those two (top and bottom nav). We are also prefetching the URL only on the first hover of the links and they are cached.
Upon reviewing the issue, the main reason for excessive bandwidth consumption appears to be a circular reference within your page model. This situation causes each link in the top and bottom navigation to load the entire page content. To mitigate this issue, we recommend refining the fields in the reference page model. By filtering to only include the fields that are necessary, you can significantly reduce bandwidth usage.
In our case we want to make a nested structure of our navigation, for example the children Application Development and Artificial Intelligence (top navigation model) has parent Software Development (top navigation model), which has a parent “Services” (top navigation model). This is needed so we can group the links like this:
The two options to match the models is by handwritten title and URL OR by reference and we chose the reference one, because otherwise changing one title or URL (for example if we want to change “Software Development” to “Software development” or the url software-development to something else), we will need to manually change it in all the children (Application Development, Artificial Intelligence, etc…).
Example of the url right now: …com/services/software-development-services/artificial-intelligence
Can you give any suggestions or workarounds? Thank you in advance!
Thanks for your detailed response! While your implementation is correct, it could end up fetching a lot more unnecessary data than needed. To optimize this, I recommend using a data model approach to create the navigation menu. You can find helpful guidance in this forum post: Best Practices for Creating Navigation.
Hope this helps, and feel free to reach out if you have any further questions!
