Open UbiquitousBear opened 1 month ago
@UbiquitousBear have you read the section on SPA: https://docs.quarkiverse.io/quarkus-quinoa/dev/advanced-guides.html#spa-routing
See both the NOTE and the WARNING.
@melloware
Note: By default, Quinoa will ignore quarkus.resteasy-reactive.path, quarkus.resteasy.path and quarkus.http.non-application-root-path path prefixes. You can specify different path prefixes to ignore using quarkus.quinoa.ignored-path-prefixes.
Warning: Currently, for technical reasons, the Quinoa SPA routing configuration won’t work with RESTEasy Classic. Instead, you may use a workaround (if your app has all the rest resources under the same path prefix):
To clarify, I'm using the graphql
extension, which exposes /graphql
, so I don't think the cases fall under either, unless /graphql
should be defined under quarkus.quinoa.ignored-path-prefixes
?
Yeah I am wondering the same thing.
Any way you can try it out or put together a small runnable reproducer?
Also did you enable spa routing? A runnable reproducer will help figure it out.
@melloware I've enabled SPA routing, whilst I can't isolate the example (simply due to lack of time this week), I am more than happy to push the whole thing to a private GH repo if that helps?
Sure it might help me if I can look at it and suggest some changes.
@melloware invited :)
Thanks I will check it out tomorrow
@UbiquitousBear try this. next14-quinoa.zip
Unzip and run mvn quarkus:dev
and navigate to http://localhost:8080
it uses Next App Router and the dynamic slugs work fine.
This proves Quinoa and SPA is working.
you might want to check if its all that Atlassian Code or other things you have going on in your complex project.
@melloware if you navigate directly to http://localhost:8080/post/2020/first-post/with/catch/all/routes in your browser, does it still work?
When I go to that URL directly, I see:
[Home](http://localhost:8080/)
[About](http://localhost:8080/about)
[First Post](http://localhost:8080/post/2020/first-post/with/catch/all/routes)
[Second Post](http://localhost:8080/post/2020/second-post/with/catch/all/routes)
Hello World!
Ahhh it works when i click the Next links but not directly do the URL in the browser. Let me look.
Interesting so when you click the link here is what Next Generates:
http://localhost:8080/_next/static/chunks/pages/post/%5B...slug%5D.js
Which is not the same as
http://localhost:8080/post/2020/first-post/with/catch/all/routes
Assigned to @ia3andy i am not quite sure how this route is being lost.
@all-contributors add @UbiquitousBear for bug
@melloware
I've put up a pull request to add @UbiquitousBear! :tada:
@melloware trying with 2.4.4, still not fixed?
No. No fix was made I only tweaked how it discovers NextJS but not your issue which is why it's still open.
Ah ok - I wonder if it's something to do with how rewriting is forwarded. I believe the same happens when I build the project into a jar for deployment.
Yep it's something going on with SPA routing.
I am debugging this. I think I am closer to seeing what is wrong.
Here is what I have debugged:
[io.qua.qui.QuinoaSPARoutingHandler] (vert.x-eventloop-thread-2) Quinoa checking SPA request '/post/2020/second-post/with/catch/all/routes'
[io.qua.qui.QuinoaSPARoutingHandler] (vert.x-eventloop-thread-2) Mount Point: '/' Route Path: '/'
[io.qua.qui.QuinoaSPARoutingHandler] (vert.x-eventloop-thread-2) Quinoa is re-routing SPA request '/post/2020/second-post/with/catch/all/routes' to '/'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/_next/static/chunks/webpack.js'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-3) Quinoa is forwarding: '/_next/static/development/_buildManifest.js'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/_next/static/chunks/pages/_app.js'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-3) Quinoa is forwarding: '/_next/static/chunks/pages/index.js'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/_next/static/development/_ssgManifest.js'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/_next/static/chunks/react-refresh.js'
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/_next/static/chunks/main.js'
[io.net.han.cod.htt.web.WebSocketServerHandshaker] (vert.x-eventloop-thread-2) [id: 0xf37380dd, L:/127.0.0.1:8080 - R:/127.0.0.1:49346] WebSocket version V13 server handshake
[io.net.han.cod.htt.web.WebSocketServerHandshaker] (vert.x-eventloop-thread-2) WebSocket version 13 server handshake key: nsM7SH5Cyulob732tXFtWA==, response: DQ/ZZpL7GZ78wggZGGsDlPWTqoc=
[io.qua.qui.QuinoaDevWebSocketProxyHandler] (vert.x-eventloop-thread-2) Quinoa Dev WebSocket Server Connected: 127.0.0.1:3000/_next/webpack-hmr
[io.net.han.cod.htt.web.WebSocketClientHandshaker13] (vert.x-eventloop-thread-2) WebSocket version 13 client handshake key: aoCqCGY1pUICRlB533ZAkA==, expected response: r5nmJp82/Efxbzl29S9GEE1HaX4=
[io.ver.cor.htt.imp.Http1xClientConnection] (vert.x-eventloop-thread-2) WebSocket handshake complete
[io.qua.qui.QuinoaDevWebSocketProxyHandler] (vert.x-eventloop-thread-2) Quinoa Dev WebSocket Client Connected: 127.0.0.1:3000/_next/webpack-hmr
[io.qua.qui.QuinoaDevProxyHandler] (vert.x-eventloop-thread-2) Quinoa is forwarding: '/_next/static/development/_devMiddlewareManifest.json'
[io.qua.qui.QuinoaDevWebSocketProxyHandler] (vert.x-eventloop-thread-2) Quinoa Dev WebSocket Client message: {"action":"sync","hash":"172eea221fcc05a4","errors":[],"warnings":[],"versionInfo":{"staleness":"fresh","installed":"14.2.5"}}
[io.qua.qui.QuinoaDevWebSocketProxyHandler] (vert.x-eventloop-thread-2) Quinoa Dev WebSocket Server message: {"event":"client-success","clientId":1722003263354}
[io.qua.qui.QuinoaDevWebSocketProxyHandler] (vert.x-eventloop-thread-2) Quinoa Dev WebSocket Server message: {"event":"span-end","startTime":1722003263180,"endTime":1722003263398,"spanName":"navigation-to-hydration","attributes":{"pathname":"/post/2020/second-post/with/catch/all/routes","query":""}}
[io.qua.qui.QuinoaDevWebSocketProxyHandler] (vert.x-eventloop-thread-2) Quinoa Dev WebSocket Server message: {"event":"ping","page":"/"}
This websocket message back from Next is interesting.
Quinoa Dev WebSocket Server message: {"event":"span-end","startTime":1722003263180,"endTime":1722003263398,"spanName":"navigation-to-hydration","attributes":{"pathname":"/post/2020/second-post/with/catch/all/routes","query":""}}
Line 3, why is quinoa rerouting to /?
@UbiquitousBear its explained right here: https://docs.quarkiverse.io/quarkus-quinoa/dev/advanced-guides.html#spa-routing
It looks like its successfully being sent to Next. But the response from Next is not the page it looks like somehow it stays routed to /
but the WebSocket response from Next seems to indicate it knows the route
happened.
Could this be a nextjs bug? But wonder why it can't be reproduced using the dev server....
I don't think so i think its just a matter of figuring out why Quinoa SPA handler is not handling NextJS 14 AppRouter. I used to have it working it older NextJS versions I think 12. But AppRouter is newer and NextJS seems to be changing every day.
To clarify, the example (and where I'm see the issue) uses the Pages Router, not the App Router...
I see a mention of hydration, are you sure there is no server side rendering in there?
I see a mention of hydratation, are you sure there is no server side rendering in there?
what are you defining as hydration? Hydration is happening at some level, always does in React applications.
@UbiquitousBear AFAIK hydration is happening only when the server is doing part of the work which is not the case for plain SPA no?
@UbiquitousBear AFAIK hydration is happening only when the server is doing part of the work which is not the case for plain SPA no?
That's one definition of hydration when applied to the App Router. Hydration as-is, in client side generated apps still refers to attaching event listeners to the static HTML, making it dynamic at some level.
https://github.com/vercel/next.js/blob/cf62dccd850ce48429955463205dd0105e83ddbd/packages/next/src/client/index.tsx#L569 is calling the markHydrateComplete
function which generates the span.
Describe the bug
When I navigate directly to any non-root URL e.g.
http://localhost:8080/components/[id]
orhttp://localhost:8080/components/
, the contents ofhttp://localhost:8080/
(iesrc/pages/index.tsx
is shown. If it try the same request over the nextjs dev server directly, iehttp://localhost:3000/components/[id]
the routing works as expected.Inspecting the state of
next/router
shows that the path is picked up, but nothing else is. Unsure whether this is a next issue or a quinoa issue.Quinoa version
2.4.3
Quarkus version
3.12.3
Build / Runtime
Next.js
Package Manager
PNPM
Steps to reproduce the behavior
next14-quinoa.zip
Unzip and run
mvn quarkus:dev
and navigate tohttp://localhost:8080
it uses Next App Router and the dynamic slugs work fine.However naivgate directly to
http://localhost:8080/post/2020/first-post/with/catch/all/routes
and it loses the route.Expected behavior
No response