[🐞] Route loader dropping query params on static builds used in hybrid mobile apps

[srapport]

Which component is affected?

Qwik City (routing)

Describe the bug

Route loader logic is dropping query params on static builds, but is working correctly on SSR builds. It is necessary to return the query string consistently in both SSR and Static builds to support hybrid mobile apps. This was working but broke in a recent qwik release.

Reproduction

https://github.com/srapport/qwik-static-route-loader-issue

Steps to reproduce

using the sample repo:

pnpm i
pnpm build
pnpm serve

Hover over the link on the home page and inspect the network results. The query string is dropped.

Now, compare this to an SSR execution:

pnpm dev

Hover over the link on the home page and inspect the network results. The query string is preserved.

System Info

System:
    OS: macOS 14.6.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 283.30 MB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.7 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
    bun: 1.1.17 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 127.0.6533.120
    Edge: 128.0.2739.42
    Safari: 17.6
  npmPackages:
    @builder.io/qwik: ^1.8.0 => 1.8.0 
    @builder.io/qwik-city: ^1.8.0 => 1.8.0 
    typescript: 5.4.5 => 5.4.5 
    undici: * => 6.19.8 
    vite: 5.3.5 => 5.3.5

Additional Information

@shairez, following up on our conversation.

Cc: @KenAKAFrosty @wmertens @mhevery

[JerryWu1234]

let me take a look

[JerryWu1234]

Do you have any ideas about this bug? @wmertens q-data.json is real-time when you run npm run dev but q-data.json was built to be a bundle in PRO,

[wmertens]

@JerryWu1234 I think the problem here is that q-data.json is read from the filesystem even when a query string is provided. It should only use exact matches to do this, and fall back to the server

[JerryWu1234]

@JerryWu1234 I think the problem here is that q-data.json is read from the filesystem even when a query string is provided. It should only use exact matches to do this, and fall back to the server

you mean that doesn't generate a q-data.json file when run pnpm run build。 right？ it gets the content of q-data.json from server

[wmertens]

hmm no, q-data is generated by SSG too. The problem is that it is only valid without the query string and should not be served if a query is present

[wmertens]

@srapport the problem is that serve strips the query string and then serves q-data.json which was generated for the page without the query string.

However, when building a static site, there is no server to ask q-data from, so falling back to a file without query string is reasonable. However, when you do so, the query string is a lie, because the q-data was generated without the query string. In that case, Qwik should remove it from the browser's URL.

So, there's two cases for SSG:

1. static files are served when they exist and otherwise it falls through to the server
2. only static files are served, query strings are stripped if no file exists with that query string

In case 1, I believe everything works as it should. In case 2, I also believe everything works as it should, except that currently there's no way to generate SSG pages with query strings. I'm looking at adding that.

[srapport]

Thank you @wmertens. So long as we provide a way to get the query string, all is good. Otherwise in a static hybrid mobile context such as Cordova or Capacitor, there is no way to stitch it back together without patching fetch.