Could someone guide me on the best approach to achieve this in Next.js?

[SrushtiSanghani2003]

I'm using dynamic routing in my Next.js project (e.g., /community/[slug]). When the slug in the URL changes—such as navigating from /community/a to /community/b—the entire page re-renders. I would like to prevent a full page re-render and instead just update the relevant content based on the new slug, ideally using client-side logic or state updates.

[icyJoseph]

How are you doing your navigation?

• https://stackblitz.com/edit/nextjs-gytod7gf?file=app%2Flayout.tsx

[SrushtiSanghani2003]

My navigation slug changes dynamically from the API. For example: community/slug1, community/slug2, and so on.
how to solve it my page rerenfder stop.

[icyJoseph]

From what you describe, I think you might want to use a layout at community/layout.tsx ~ get the dynamic slugs from there, and render a navigation list, as well as any stuff you want to persist.

See here, https://stackblitz.com/edit/nextjs-gytod7gf?file=app%2Fcommunity%2F[slug]%2Fpage.tsx,app%2Flayout.tsx,app%2Fcommunity%2Flayout.tsx the counter persists and knows about the current page