Shallow routing for dynamic routes

[yantakus]

Hi. Is there a way with next.js v9 to navigate from /post/123 to /post/124 shallowly?
Here's my page structure:

pages
  post
    [id]

Tried

const href = `/post/124`
const as = href
Router.push(href, as, {shallow: true})

when I'm on /post/123 page with no luck (the page refreshes).

What I need to achieve - I have a sidebar with posts list on the left of the page and selected post on the right. So when clicking a post title in sidebar I show it on the right and I also need to update the url, without refreshing the page.

[sgmonda]

I'm experiencing the same issue but using <Link href="/posts/whatever">. It seems dynamic routes are forcing SSR and there's no way to avoid that.

If I go from /posts/whatever to /posts everything works as expected, but when I go from /posts to /posts/whatever then SSR is forced.

As per my tests, it does not depends on the execution mode (development vs. production). It is happening in all cases.

[timneutkens]

href is the path inside the pages directory
as is the url in the browser

See docs here: https://nextjs.org/docs#dynamic-routes

[sgmonda]

@timneutkens sorry but I don't understand your answer... Keeping in mind I've of course read the documentation carefully, maybe I'm missing something.

In case you don't want to show a different URL than the real path in the pages directory, it is ok to set the same value in as and href, right? It is what @yantakus is doing.

I've also tried to set only href and not as but the behavior is exactly the same: SSR with full page refresh.

[yantakus]

@timneutkens thanks, it worked. There's nothing about it in https://nextjs.org/docs#shallow-routing chapter of the docs. That's why I was confused.

[Timer]

@sgmonda, the linked documentation states that a <Link> component looks like this:

<Link href="/post/[postId]" as="/post/first-post">
  <a>First Post</a>
</Link>

Your provided example mismatches this <Link href="/posts/whatever">.

[sgmonda]

@Timer I've also tried setting <Link href="/post/[postId]" as="/post/[postId]"/> (as I don't need a different URL than the real path) but the same behavior is observed. A client-side page change is expected but a SSR happens, with a full page refresh.

Maybe I'm missing something. I'm making more tests in order to being able to provide more info or a simple running example.

[Timer]

That, too, does not match the provided example @sgmonda. Please use the values exactly as displayed above.

[sgmonda]

Oh my god, I was understanding [postId] as a macro to be replaced by me when coding but, in fact, It is [postId] literally what have to be wroten. Now that I've understood that it works like a charm.

Sorry and thank you very much @Timer @timneutkens for your patience. :-)

For future stupids, like me, what have to be replaced during your program execution is the as part but not the href (that is a literal string declaring your filesystem path):

            Your code shouldn't
                 change this
              during execution
                     |
                     v
<Link href="/post/[postId]" as={`/post/${id}`}>
  <a>First Post</a>                      ^
</Link>                                  |
                                  This is what you
                             have to modify dynamically
                                during the execution

[Timer]

@sgmonda maybe you could PR our documentation clarifying this for other users? In all relevant sections.

[afsanefdaa]

It doesn't work for me!

my directory:

test
    [category]
        [table]

Router.push(
      '/test/[category]/[table]' ,
      '/test/somecat/sometable',
      { shallow: true },
    );

[ENUQA]

It doesn't work for me!

my directory:

test
    [category]
        [table]

Router.push(
      '/test/[category]/[table]' ,
      '/test/somecat/sometable',
      { shallow: true },
    );

you are moving to [table] from [category] so shallow is ignored because you are going to other file. I have the same problem. If I use shallow it means I don't want to change rout (for example I am opening modal). I just need to change url in browser and if I link it to someone I will handle it in other file for SSR.