Next.js - static rendering icons not static

Question

Thanks for your time.

I am working on a complicated next project for work. I understand it to be a static site generator and the assets (icons for buttons) used on the page are gathered via a pre build script and stored in the public directory of this project. This next project then generates forms, which i am observing unexpected behaviour on.

When looking at the network tab and loading one of the forms the page requests the icons and loads / renders my page, at completion of the load a GraphQl request is made for background data.

This should now be the finished state, there is no change to the page and there is no need for re-render / the components these icons sit within are not updated and a re-render does not happen, however...

A new network request is made and the assets/icons in my components flicker/reload, by what i think is by the framework - why is this new request made? Is this something that the framework is doing? Initiator looks like this - so i think so, but can't see any reason / documentation for it.

_next/static/chunks/framework-2191d16384373197bc0a.js

Answer 1

Finally have a answer. Bad architecture in the application.

This was not simply limited to the images. We had a stateContext which we have been dispatching to for everything, that context is what is causing the re-render, its not state so each update re-renders everything at a global level so each button press / graphql query response caused a re-render.

The re-render was not paid any attention to until we throttled and noticed the flickering of these icons.