Client-Side Page Rendering / Routing With Dynamic Route Segments

[RebelEcheveria]

Is it possible to have a page with a dynamic route rendered entirely on the client?

Take for example a page at /app/posts/[id]/page.tsx

With the App Router, is it possible to statically export that page as /posts/[id].html and have it serve [id].html to be rendered on the client with access to the id param? My use case is that I am trying to serve a page with params that may not be known at build time and want the client to be able to load the page data using client side fetches and not have to depend on a Node backend.

It has been suggested to me to remove the dynamic route segment and instead use React Router inside of a /posts.html page but I had hoped that the new App Router could be used instead.

[metafoo]

I'm currently facing a similar issue. I have some pages with dynamic route segments (doing client-side fetching only) and don't want the app-router fetch the same page over and over and over again.

There are so many caching-related options. I absolutely don't get why the app-router isn't able to just remount a page-component when it has no server-side dependencies at all...

Did you find a solution?

[RebelEcheveria]

I wasn't able to get the page rendering client-side at all unless I removed the dynamic route segments. How are you getting the page to render on the client with the app router in the first place if it has a dynamic route segment?

[curiousercreative]

Perhaps this should be a bug report? When you build, do you see these dynamic routes as SSR (denoted by λ) or SSG (denoted by ○)?

[curiousercreative]

For me, I see dynamic route segments as SSR regardless of whether any server-side data fetching or rendering is required :(

[Elalfy74]

You can achieve this by using Route Segment Config

add this line of code to your page
export const dynamic = 'force-static';
then build it and u will have it as SSG

[curiousercreative]

Thanks for mentioning it. I have been using that for some time, but it still results in non static pages at build. Using edge runtime though makes it pretty quick, but it's still making a request for every dynamic route page load.

[Elalfy74]

according to Next.js Docs Edge and Node.js Runtimes
you cannot have SSG while using edge runtime

[curiousercreative]

@Elalfy74 this is what I was referring to: #56721

[mhsnook]

Ya same 👍 I am statically generating my app so I can compile it with Tauri into a mobile app. It's been working great -- a nextjs app inside a web view compiled by tuari? it feels soooo smooth! Except for the inability to declare client routes like /language/[code]/phrase/[*phrase_id*] -- I always know the language codes at build time but I don't know all the phrase IDs because the users generate the content! So I could use ?searchParams but I want these things to be stably link-able and viewable on the web also and I want to use real URLs and not /language/eng/phrase?id=12123432 🤷 So maybe I will add a client router into the app???? but this seems silly.

[jatinmodi001]

Is there any update on the above?

[Davidkle]

Nextjs doesn't support it. Similar thread.

If you can get away with query params, that's probably the best way togo for now.

[aminick]

Why can't we have nice things?

This is like the basic of the basics, unbelievable 😂

[CRYPTOCEX]

after updating to latest version why i am getting : "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client"