Transcript from the "Multi-Page vs. Single-Page Applications" Lesson
[00:00:00]
>> 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:00:55] And the nice thing about this is is this is literally What the SEO sees, right? If I go here, and I disabled JavaScript. And I refresh, the clock stops working, right? BitStarz working, the search box doesn't work anymore. But I can still going, I can click on stuff and I can go and do edit.
[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:01:42] But it is an MPA, so what if you wanna have an SPA, right, a single page application? So let's re-enable JavaScript again. Oops, that's not what I wanted. Okay, so JavaScript is re-enabled, the clock is working again. So let's go to this link right here and we have our a href in here.
[00:02:12] This is our contacts, right? So I can click on a specific contact. And instead of A, I'm gonna turn this into capital Link. So there's a special component called link and I'm gonna aimport this, and everything else stays the same. So now, let's go back here, let's open up Network tab and look at the JavaScript.
[00:02:36] And if I go and I click on a new, for example, it should be a client-side navigation. So whole bunch of code downloaded, but nothing happened, what happened? Looks like there is a bug and, The thing I wanted to point out, let me refresh again. There's a little bit of JavaScript in here, like the clock shows up, etc.
[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:23] You have turned a multi page app into a single-page app. And by the way, even if I still have links in here, let's keep the link here which is broken for a second. I just wanted to disable JavaScript here and show like, look, it's disabled. The JavaScript is disabled, and then it just becomes a regular link.
[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.
[00:04:07]
>> Yes.
>> 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:04:48] The other one is it could be under some circumstances faster. As of right now, when you navigate from page A to page B using the SPA model, we download the JavaScript and execute it. But the thing that we would really love to do, and we're not there yet.
[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.