Qwik for Instant-Loading Websites & Apps Multi-Page vs. Single-Page Applications
Transcript from the "Multi-Page vs. Single-Page Applications" Lesson
>> One of the things I wanted to do is to create a new route for creating new items. But like you can imagine the creating is pretty much the same thing as editing, right? It's a few differences, but fundamentally the same thing. So I'm gonna skip that in the interest of time.
[00:00:12] Instead, I wanna talk about, we still have to talk about login. And but before we talk about login, I wanna talk about this app for a second. Let me reset the size on this. And the thing I wanna show you is that this app is currently a multi-page app, right?
[00:00:28] It's an MPA, so when I go in, I navigate, my server is not running, cuz I was pushing into GitHub. When I navigate somewhere, I get details. And so navigation basically causes a full page refresh. And if your framework is really good at starting up like Qwik is, that might be fine.
[00:01:19] And if I try to delete things, it will still complain that it's not there, because, it's a brown trip app, right? And this is literally what Google sees. So for SEO, this is amazing, this is literally what we want. I can't imagine something better from an SCS point of view.
[00:02:58] And when I navigate to a page, notice that all of the code associated with the new page gets downloaded. And it should execute and it should update. I don't know why that's not happening, because the URL updates and everything else. So sorry, a bug, my apologies. But the point I wanted to make is that just by changing the kind of link you have in a system.
[00:03:43] And then it works as you would expect. So it bridges the world of MPA and SPA and I don't know, this used to work, so I'm sorry. I need to figure out, to talk to the right people as to what's going on in there, yes?
>> I guess my question is, it looks like you're doing something similar to what next.Js does with their link component.
>> But I guess, my question is, if you have an MPA and you get all these benefits in performance and SEO and so on. What would be the advantage or reason to switch over to SPA in this context?
>> So there are a couple of reasons, one, is that MPA makes it difficult to keep state.
[00:04:32] So as navigate from page A to page B, what if there is some state in the header and header is the same in the first and second page, right? It would be nice if you could keep the state in the header, right? So that kind of information is why you might want to have something like an SPA.
[00:05:04] But we think we can get there, is to just download just the inner HTML for that section. And then the navigations become amazingly fast. Because you're saying, look, the chrome around the page, the layout of the page stays the same. Not only does this stay the same, in our case, we have a state which is the clock.
[00:05:23] That state persists between navigation, that doesn't get destroyed. But the inner HTML updates, right? So that's one of the things that we would like to get solved, keep in mind we're still in beta. But that's kind of the reasoning for it. So many systems are either purely MPA or purely SPA.
[00:05:42] And we really would like to make it fuzzy, I mean, you can have both. You can start it as an MPA, and then transition over to an SPA, it's fine.