Comments (4)
Hmm I'm afraid I don't understand. Apart from the contexts' data that Link uses, what needs to be shipped to the client to enable SPA?
The useNavigate
context needs to be shipped for SPA, this is big as it requires all of Qwik City, that's why SPA only resumes if it was already included on the page because the dev used Link
or nav()
.
If this isn't present then it falls back to simply reloading the page with location.href
when a popstate occurs. This will usually only occur on a "leaf node", a page arrived at from a navigate but which doesn't contain any Link
or nav
itself. (anti-pattern but needs to work anyway)
To make it more clear, this resume is included on every single Qwik City page even MPA. Except it's just a tiny couple-line shim, the actual script is gated behind a history.state
check, this checks if the page was ever SPA, if it was then a much larger (pre-cached during previous SPA) script is manually loaded (bypasses the Qwik loader), this big one actually performs this resume functionality. But only if the context is already present on the page, because that pulls in many kB of Qwik City. It's like a multi-stage boot process, because we want to minimize footprint to near 0 when SPA is not used.
When a user refreshes a page that was arrived at through SPA, or re-opens browser, etc. the navigate context is lost. This whole contraption is designed to track and restore scroll positions no matter what the user does or how badly things get messed up and it has to do it without impacting MPA; it always just works and it's nearly free.
Hope that explains everything. And like I said above, there's a couple line solution to fix this problem and maintain current limitation (dependence on Link), I updated the issue to explain.
from qwik.
Thanks Jordan! Question: how about always including the spa context, would that also solve it? Is it that huge?
from qwik.
Thanks Jordan! Question: how about always including the spa context, would that also solve it? Is it that huge?
I don't think this is possible, the useNavigate
context requires the full Qwik City meta framework to also be present. Qwik's feature of choosing between SPA or MPA dynamically without having to make a permanent design decision constrains this because MPA doesn't want to load anything to do with SPA.
When I first designed the SPA resume and scroll restore it was clear to meet the demands for all cases, it had to exist kind of outside Qwik & Qwik City such that it will hook in to useNavigate
if it's already included on a page to re-bootstrap but not actually trigger any dependency if it's not. This also solves edge-cases as explained above.
With that said, this can be fixed very easily by simply including a new attribute with a magic string on the Link component and selecting on that. This wouldn't require any other changes I think. But perhaps maybe someone can find a better way to expand functionality to work for all cases of useNavigate
like nav()
or custom Link components instead of relying only on the official Link
.
from qwik.
Hmm I'm afraid I don't understand. Apart from the contexts' data that Link uses, what needs to be shipped to the client to enable SPA?
from qwik.
Related Issues (20)
- [🐞] qwik-city: vite base doesn't work in dev mode HOT 4
- [🐞] requestEvent.url.hash is always the empty string, even when the URL contains a hash HOT 1
- [🐞]icons not working in production or in preview mode HOT 1
- [🐞] Qwik server crashes when entering multiple slashes at the end of a home route
- [🐞] Sitemap is not generating / finding routes when using localized routing HOT 1
- [✅] The Edge Function "_qwik-city" is referencing unsupported modules HOT 1
- [🐞] useStylesScoped$ doesn't support nested CSS HOT 8
- [🐞] Qwik Insights returns 500 error for fetching data/strategy HOT 3
- [🐞] Invalid module "@qwik-city-plan" is not a valid package name imported from HOT 12
- Code split loading[🐞] HOT 2
- [🐞] Error Integrating React Libraries (Material ui) in Qwik Framework HOT 1
- [🐞] ERR_TOO_MANY_REDIRECTS – Redirect loop on qwik.dev HOT 2
- [🐞] Qwik Form resets translated strings on submit to original language (qwik-speak) HOT 2
- [🐞] Cannot use node.js module inside Endpoint because of rollup compilation error HOT 4
- [✨] feat: add support for eslint flat config - eslint-plugin-qwik HOT 2
- [🐞] Missing "export" in some types
- [🐞] In dev mode when saving a change, it sometimes gives an error "aborted"
- [🐞] The CJS build of Vite's Node API is deprecated HOT 1
- [🐞] Bun adapter breaks / hangs build
- [🐞] Excalidraw Integration HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qwik.