-
-
Notifications
You must be signed in to change notification settings - Fork 348
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pre-rendered dynamic routes (static host deployment) #1476
Comments
|
I'm de-prioritizing this. While I personally think that this is a great feature, I still think the other I wonder: is there any SSR/SSG framework out there that supports this? (If yes, then this also increases the priority.) |
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. |
Agreed.
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.
I've added a workaround to my original post. Would that work for you? |
perf, I'll head that route (get it) until Vike's router gets support for this 👌 |
We'd appreciate this feature as well. 🙌 Is there an example of how to set up the workaround with react-router? |
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:
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. |
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
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 |
Yes I believe so. Here is a test repo that demonstrates this (you can look at the 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 ( |
If you reroute a request from say |
Hello, by reroute do you mean if I go to |
Sure, but the question here (I think) is whether or not the pre-rendered dynamic route page (in this case |
Yeah it will still show app.get('/blog/:blogID', sendFile('blog/[blogID].html')); |
I'm labeling this ticket as Thanks @ConnorLanglois for the example. |
As always: feel free to add a comment here if this a blocker specifically for your app. |
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. |
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. |
I'm not sure if the following is a GOOD approach, but it's working for us so far, so wanted to share it, and also ask whether it's supported or not. We use Vue, Vike, and vike-vue. The site is hosted as a static site from a Google Cloud bucket, uses SSG pages in a hybrid (SPA-like) fashion, and gets all runtime data from a separate API. We want both client-side routing and deep linking, while still hosting from a static site. For instance, users will often want to deep link to their custom road trips (e.g. https://epicroadtripplanner.com/roadtrips/d9cc2d68-09d0-4d9e-bd0a-258936c2be65), but the fetched content (and the route itself) for roadtrips are dynamic. We use file system routing in this project, and all of the following are in the file system at /src/pages/roadtrips/@roadtripId: "+onBeforePrerenderStart.ts" pre-renders an "all" page:
Importantly, we use Google Cloud Load Balancer's url map functionality to re-write the incoming request urls, so that it serves this 'all/index.html' page for any requests to /roadtrips/{roadtripid=*}, regardless of the value of roadtripId in the actual request:
Here's the part I'm not sure about - specifically, whether is supported/documented to use resolveRoute, especially in the data hook, outside of a route function: In the client-only data hook "+data.client.ts", "pageContext.routeParams" still returns "all" for pageContext.routeParams["roadtripId"], so instead we use
|
@TimJohns Yes LGTM, I don't see any issues with your appraoch. As for |
There is also another approach to dynamic URLs, at least on Github Pages: using 404.html redirection. When users go to e.g.
Then in todos/index.html you can get todoID using |
Currently, as explained at https://vike.dev/pre-rendering, parameterized routes (e.g.
/movie/@movieId
) need to useonBeforePrerenderStart()
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
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.
Conversation & design how we can support that: #1475.
How to set up URL rewrites:
The text was updated successfully, but these errors were encountered: