Pre-rendered dynamic routes (static host deployment)

[brillout]

Currently, as explained at https://vike.dev/pre-rendering, parameterized routes (e.g. /movie/@movieId) need to use onBeforePrerenderStart() to be able to be pre-rendered.

Instead, it would be great if Vike supports resolving the route dynamically at runtime on the client-side. (E.g. /todos/@todoId which is inherently dynamic, since new To-Do items can be added at any time.)

In the meantime, as a workaround, the user can use React Router / Vue Router / Solid Router (in addition to using Vike's router) for such dynamic routes.

Learn more

I want to handle routes like /todos/@todoId. I’m looking to keep absolutely everything client side but still have the dynamic routes.

Quoting a user who wants to deploy to a static host.

Basically: instead of one HTML file per URL, having one HTML file for multiple URLs while Vike's client-side takes care of the routing.

// vike.config.js

export default {
  prerender: {
    // Like SPA: all parameterized (i.e. dynamic) routes fallback to / (i.e. index.html)
    fallback: '/'
  }
}

// /pages/admin-panel/+config.js

export default {
  prerender: {
    // All parameterized (i.e. dynamic) routes inside /pages/admin-panel/ fallback to /admin-panel
    fallback: '/admin-panel'
  }
}

// /pages/todos/+config.js

export default {
  prerender: {
    // All parameterized (i.e. dynamic) routes inside /pages/todos/ fallback to /todos
    fallback: '/todos'
  }
}

Conversation & design how we can support that: #1475.

How to set up URL rewrites:

You normally handle this behavior of always serving index.html with a _rewrites file on Netlify.
Is _rewrites somewhat standard?
they all have their own methods
from some googling, Vercel will set the rewrites automatically if you select React as the framework, or you can set manually I think like this

// vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

In Render you can set the rewrites using their GUI, in a similar vein cloudflare does this automatically as well

[nitedani]

Hi yall, I'm looking into using vike with react, and I was wondering if this use case was possible... I want to have some pages as SPA and others as SSG, and deploy to static hosting like Netlify.
Now this is in general very simple, I just prerender every page, including all SPA pages. But here's the twist, would it be possible to generate only one index file for all the SPA pages and use a Netlify config to redirect all of those pages to that file? This is exactly what you'd do with a normal Vite setup, but I just want to add some SSG files to the mix

[brillout]

I'm de-prioritizing this. While I personally think that this is a great feature, I still think the other v1-release tickets to be more important. That said, I'm happy to revisit prioritization if it's a blocker for someone.

I wonder: is there any SSR/SSG framework out there that supports this? (If yes, then this also increases the priority.)

[andriygm]

this would be huge -- I know at least solid-router is able to do this. currently cannot use Vike on one of my Solid projects because of this.

[brillout]

this would be huge

Agreed.

solid-router is able to do this

That isn't an SSR/SSG framework. It's definitely possible to implement, but it isn't trivial either. Thus I'm genuinely curious if there is an SSR/SSG framework out there that supports this.

currently cannot use Vike on one of my Solid projects because of this

I've added a workaround to my original post. Would that work for you?

[andriygm]

perf, I'll head that route (get it) until Vike's router gets support for this 👌

[CookedApps]

We'd appreciate this feature as well. 🙌

Is there an example of how to set up the workaround with react-router?

[ConnorLanglois]

That isn't an SSR/SSG framework. It's definitely possible to implement, but it isn't trivial either. Thus I'm genuinely curious if there is an SSR/SSG framework out there that supports this.

If I understand this issue correctly, I believe NextJS supports this kind of routing. Note the new app router in nextjs does not yet support this, but they are working on it. Notably, the "old" pages router supports this as other users mention; although I haven't used that, I'm guessing they're referring to the use of code like this from this page:

For example, a blog could include the following route pages/blog/[slug].js where [slug] is the Dynamic Segment for blog posts.

const router = useRouter()
return <p>Post: {router.query.slug}</p>

It works because I think nextjs allows the parameterized route without requiring you to specify the build-time static urls for it. I also just noticed another user in that issue thread said that Gatsby also supports dynamic routers in static pages.

[brillout]

Hm, I'm not sure. From quickly glazing over the links you posted, it still doesn't seem to me that Next.js supports this (both App Router and Pages Router).

An easy way to test is this: can you create a Next.js app that defines a parameterized route but outputs only one .html file (for multiple URLs)?

Gatsby allows you to use dynamic routers in static exports without configuring server-side redirects.

Vike can do that as well. The question is whether you always need to provide a list of URLs for parameterized routes.

Same test: can you create a Gatsby app that defines a parameterized route but outputs only one .html file (for multiple URLs)?

[ConnorLanglois]

An easy way to test is this: can you create a Next.js app that defines a parameterized route but outputs only one .html file (for multiple URLs)?

Yes I believe so. Here is a test repo that demonstrates this (you can look at the pages/product folder for the dynamic route, the other stuff is nextjs scaffolding defaults etc). When you build it, it will output a single html file for the parameterized route ([id].html) and the routing is done client side. Notably, you don't have to specify any build-time static urls for that particular dynamic route, it just works client side for any param you enter. Let me know if this differs from what you were asking, seems like "dynamic routes" is an overloaded term so trying to make sure we match up on what we mean.

For Gatbsy, I haven't used it before so not sure.

Edit: Actually, now I am seeing that if I manually go to the dynamic route (/product/543875) through the browser address bar it doesn't actually work, it 404s obviously since that file doesn't exist on disk. But if you are already on the index page and click the Link to the dynamic route, it does work. I think this is just due to http-server not rewriting urls, and if I deploy to cloudflare pages they understand nextjs's build output and just rewrite it. So perhaps this clashes with the behavior you are discussing above.

[andriygm]

But if you are already on the index page and click the Link to the dynamic route, it does work.

If you reroute a request from say /product/54387 to [id].html, does [id].html route on load? or is client routing only done on navigation from within?

[ConnorLanglois]

Hello, by reroute do you mean if I go to /product/54387 directly in the address bar and have the server rewrite it to the [id].html file does it load that [id].html file? The dummy http-server I used to test I don't think has url rewriting but cloudflare and others do or your own express server can

[andriygm]

but cloudflare and others do or your own express server can

Sure, but the question here (I think) is whether or not the pre-rendered dynamic route page (in this case [id].html) routes to say /product/54387 when you serve [id].html with /product/54387 in the URI bar.

[ConnorLanglois]

Yeah it will still show /product/54387 in the address bar when cloudflare serves [id].html. This express example shows this by using sendFile, specifically:

app.get('/blog/:blogID', sendFile('blog/[blogID].html'));

[brillout]

I'm labeling this ticket as high-prio and v1-release. The fact that Next.js's Pages Router (and soon also its App Router) support this makes this a Vike-specific blocker.

Thanks @ConnorLanglois for the example.

[brillout]

As always: feel free to add a comment here if this a blocker specifically for your app.

[Taujor]

Personally I have switched from vike to solidjs (which is a bit overkill for my project) due to this feature lacking. I would really love to see this come to vike.

[Trumspringa]

I think this could be what I've been looking for. I have this with my Gatsby JS app where the site is mostly SSG and then had a dynamic section with user authentication and interaction with Supabase.

They call it "client-only routes" . All of the dynamic pages in my app were at /app/* where essentially the app route becomes an SPA with its own router. I've been waiting to see if it will be possible to do this with solid-start when it hit 1.0 but if Vike can do it I would definitely be interested.