but what happens if you directly visit the sub routes? does it not need to fetch from server?

if you want it to not fetch route from server maybe try having a catch-all route

This is all the same "page". I'd like to be able to deep link to a particular tab, but not have it server fetched just in time. I'd like this content to already be on the page, but the routes to be as provided.

/fruit/banana/
/fruit/banana/description
/fruit/banana/more-info-tab
/fruit/banana/nutrition-info-tab
/fruit/banana/similar-fruit-tab

Catch-all seesms like the way to got, but I keep seeing requests made to the server for each tab anyways

Perhaps the reason for the server requests are my calls to router.replace(), but I'm not sure how else the URL is supposed to be updated via next

request made to server each tab even using catch-all?

Yes, but I'm using optional catch all

For example

app/fruit
  [[...fruitName]]
    page.tsx
  layout.tsx

hmm interesting

just router.push() ?

I wouldn't want to push a new route onto the stack for this use case, but I'll see what that does.

have you tried making the route staticly rendered? leaving the rest of the page to be client sided

What do you mean?

Server-wise, its static. But in the client components, its all dynamic

im not sure if that would work since i haven't tried

so you wouldn't need to get the params from the function props (this will make the route dynamic)
but instead you get it from useParams() to invoke the client side hooks

In english, that's pretty much what I want. I want the following URLs to all render the same page, but that page should be in different states (no further calls to the server after the first is visited

/fruit/banana/
/fruit/banana/description
/fruit/banana/more-info-tab
/fruit/banana/nutrition-info-tab
/fruit/banana/similar-fruit-tab

yep

In next.js config / code... I can't figure it out

make the page.tsx and layout.tsx
insdie

app/fruit
  [[...fruitName]]
    page.tsx
  layout.tsx

to be statically server rendered

that means you need to remove server functions

I have no server fns

like fetch, using params from props, header() cookies()

I just want client side routing after /fruit

I am using useParams() inside of app/fruit/[[...fruitName]]/page.tsx. Nothing more

May I'll try to next build && next start to see if the network requests are gone per tab

yeah

since all route in dev is SSRd at request time

regardless of nature

Next.js still firing network requsts for router.replace() calls.. Maybe these calls are necessary?? Can't think of what it would be other than next ensuring there isn't a specific route for that on the server then proceeding with client-side routing.

@Multiflora rose seed chalcid Is it possible to do client-only routing for sub sections of a page?

btw, @alfon Thanks for your help earlier. I still can't quite get what I want, so I'm not thinking it's meant to do client routing.

Well.. what I'm calling client routing, not what next.js calls client-side routing