Client side navigation

[mogadanez]

library
  [...packId]
    page.tsx

this parse params in form /ID/audio|video|book
and pass it to component which is "use client",

rendering tabs ( audio, vidieo, books)
content loaded inside it with useFetch, its loaded all parts and filtering on client side.

each tab uses Link to navigate correspondently to ID/audio|video|book

Problem - each time i switch audio|video|book - it loaded pack again.
Is it any way to prevent it?

[icyJoseph]

This is somewhat of a known issue, #50711, but I think one way you can fix this is demonstrated here: https://stackblitz.com/edit/nextjs-epro13lm?file=app%2Flibrary%2F[packId]%2Fpage.tsx,app%2Flayout.tsx

See the file structure:

app
├── favicon.ico
├── globals.css
├── layout.tsx
├── library
│   ├── [packId]
│   │   └── page.tsx
│   ├── client.tsx
│   └── layout.tsx
└── page.tsx

Notice how there's a layout, as child to app/library, that is app/library/layout. This layout renders a Counter component, located at app/library/client.tsx, which uses useParams, to get the params, and possibly fetch data as you do.

[mogadanez]

I have different harder situation
my url's is
/library/12/video
/library/15/audio
etc...

so Pack ID is number and inside pack I have routing to audio/video/ book which loaded all at once, and splits on client side.
I just want to preserve tab open on refresh and not have extra loading on tabs click

Forked and now with navigation counter resets :(

[icyJoseph]

Aha, I moved the files around a bit... https://stackblitz.com/edit/nextjs-pobp9k4b?file=app%2Flibrary2%2F[packId]%2Flayout.tsx but yeah, it is a bit counter intuitive imho