Why is my data not rendering properly on navigation in Next.js?

If you are using a component to display some sort of information that is coming from a data binding or data source in Builder, you might run into a situation where the proper data is not shown when navigation occurs client side, but shows correctly on page refresh. This can be due to data fetching within the component not triggering state changes, or other complications.

If you are running in to this issue or something similar, try using the key prop on the component so that Next.js knows to re-render the component whenever the value of key changes. For example, if the page you are seeing this behavior on relies on product data updating, you can try something like:

const activeProductKey = content?.data.state.productId // or any property that's unique per product

return <BuilderComponent model="..." content={content} key={activeProductKey} />