App router dynamic route segments should allow build as SSG

[curiousercreative]

Link to the code that reproduces this issue

https://github.com/CommonEnergy/nextjs-dynamic-route-segment-client

To Reproduce

1. Build app npm run build
2. Run app in prod mode: npm start
3. Open web console and navigate to the network tab
4. Click nav button "0" along the top of the web page
5. Use the browser back button
6. Click nav button "0" again
7. Use the browser back button
8. Click nav button "1"
9. Use the browser back button
10. Click nav button "2"

Current vs. Expected behavior

Expected result in build: All pages should be built SSG Actual result in build: dynamic route segment is built as SSR

Expected result in browser: dynamic route segment is fetched once Actual result in browser: dynamic route segment is fetched three times (once per dynamic route navigated)

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #202309191142~1695998943~22.04~070916d SMP PREEMPT_DYNAMIC Fri S
Binaries:
  Node: 18.16.0
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: 8.4.0
Relevant Packages:
  next: 13.5.5-canary.7
  eslint-config-next: 13.5.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Data fetching (gS(S)P, getInitialProps), Middleware / Edge (API routes, runtime)

Additional context

Deployed to Vercel here: https://nextjs-dynamic-route-segment-client.vercel.app/

Discovered this because the dynamic route segment pages in our app can take as longs as 2 seconds to load (deployed to Vercel, likely cold lambdas). Using the edge runtime with export const runtime = 'edge' dramatically reduces the response time, but you can see that it still requires network activity to load a dynamic segment despite being a client component without any server-side data fetching.

[Rishab49]

hey @curiousercreative maybe you are trying to achieve CSR. When we use Link component to navigate from one page to another like from home -> /0 or from /0 -> home it will make a network request not matter what you do as it cannot cache route response.

if you want to just change the content based on params then maybe shallow-routing can help but it only works for page with same url and different query params.

[curiousercreative]

@Rishab49 it seems that routes are cached except when dynamic. Thanks for the link to CSR. I'll give that a shot, seems like it would work for my use case.

[curiousercreative]

@Rishab49 circling back, the App router doesn't support shallow routing it appears.