How To Make A SPA With SvelteKit (SSR vs. CSR)

hey friends what's up today I want to talk to you about how to make a single page application in SW kit that's right this is something that I often see people misunderstand they think they have to use server side rendering with cellkit but that's really false you can build any type of app with cellkit but even if you're not interested in making single page applications you're still going to learn a lot because I'm going to explain the difference between serice side rendering client side rendering all of these boss words as people throw around like they mean something but no one actually knows what they are right all right but before I get started don't forget to like And subscribe and you can also support me by becoming a patreon all right friends so let's look at this diagram here so this is your traditional website that uses serers side rendering you might have heard of the term multi-page application or MPA which sounds really fancy but it's just a regular website so when you click on a link the entire side refreshes and basically that's it so here you have your client which is your browser but a client can be anything it can be your wristwatch or whatever right the kiosk where you get some information or Etc that's what a client is so when you make the initial request to the server which can be anything in this case it might be node.js you're always going to get a fresh HTML file that has all of the markup inside of it so here in this example I have a body here and this is the content so that's really how that works and this is what swell kit is by default it's server first so you're going to always get the HTML when you first open a page so let's talk about single page applications or a spa and this is basically where JavaScript takes over so again you have this client and you do a initial request so now in this case you no longer have a long running process like a node or something serverless functions really it's just really some random server and it just serves you a blank HTML file and JavaScript hooks into this file so in this example here we have this app div so this is your react swell View and Etc by default without using a meta framework right it's just a single page application so in this example it's really not the same code that the framework uses but you can imagine this is something like that so you're creating these elements with JavaScript JavaScript also takes care of everything like the routing using the browser history API and Etc and swell kit is also a spa and that might sound confusing to you at first so which one of these is it right and that's a trick question because swell kit is both and what do I mean by that so if you look at this example here I just have this title swell kit spa and then if I go inside of the developer tools and open the network tab let me just refresh this entire side so as I said your first request is going to server render this using spell kit so here you see why server size rendering is so popular for something like search engine optimization because a bot can now easily crawl your site and index it and even if you go and view page Source if I do contrl F I can search for SW kit spa and you can see here it's server side render so we get the actual markup here but you might have noticed something else look at all of these files here so how is SW kit as Spa well basically once your site is loaded now all of this JavaScript is loaded so now we can use client side navigation and swell kit becomes a single page application or a smoother user experience so now we can see that in action if I close the network tab if I go to any other route you see there wasn't really any hard refresh it just navigated using JavaScript and I can also go back and show you that so swell kit also has preloading so when I hover over this link is going to preload all of these assets you can see here here is data Json so now we're going to get all of this data inside of this node ahead of time so this is going to be a much perceived and faster site right so now when we go to our site we really don't get a HTML page because it's using JavaScript right but when you first visit the site it's going to actually server side render so let's refresh this page and you're going to see you're going to get these things as a HTML response and here inside of this FY project let me just really show you I have this routes and here I have this special Plus layout TS file at the root you can also name it plus layout. server TS so let me just really show you so these are like the defaults and of course you don't have to include this by default this is something that I have done so that I can show you so server side rendering is enabled by default client side routing is enabled of course and pre-rendering is disabled but now in this case if I disable client side rendering if I say that this is false now we're only going to rely on server side rendering so if I go here and let's go to our site so now you're going to see this is going to hard refresh so pay attention when I go to this link as you can see the spinner on top here I have this client side rendering route which isn't even going to work because I disabled client side routing right and here I have this also endpoint and this Dynamic route that we're going to look at later but as you can see now when we navigate through our site it's just using server side rendering it's a regular multi-page application but this is where swel brings that nicer user experience experience and has a router on top of ckit so now we can say true and everything is going to work the same as before but going back to our example may be thinking okay if serde rendering is so much better a nicer user experience why in the world would I make a single page application and in most cases you don't if you don't need a single page application just use the regular server side rendered so Kit app with a spa on top because you're going to know when you need a single page application and when it is well that can be for a variety of reasons you might already have a backend and you're building something like a dashboard where you really don't care about SEO or that is public facing right you also might be working on a browser extension where it doesn't make sense that you ship a server right or you might be working on a desktop application using something like electron or Tor right and again this is where it makes perfect sense to use a single page application or you might want to build an app for an embedded device like a watch or something I don't know what you crazy kids are up to these days right it can be anything and you really don't have to worry when you should create a single page application or not because it's really going to be natural when you get to that point but another strength of swell kit is that you can have all of these things you don't have to pick one thing so for example here I'm inside of routes you can for example have an app and this can be I don't know something like X colge draw so you're working on a drawing app and Etc and this can be a spa you can really specify for this page that it should be a single page application you can dis server side rendering for specific routes and then you can go again to routes and maybe you have docs and now inside of here where you have your docs inside of these docks you can pre-render them so you can have all of these things on a per route basis or inside of this layout file you can specify it for your entire app but in this case I'm just going to delete these examples all right but let's look at the difference between server side rendering and client side rendering in SW kid you might be familiar with this plus page. server ts5 file in CIT this is where your load function lives so in this load function I'm just fetching some quotes from dami Json and then I'm just going to return it and this data becomes available to this page so now if I open this page. swell file this is available to us over the export data so now we can Loop over the quotes and we can output them like normal and this is really a nice user experience because it just loads instantly and this is probably going to be cached or you can pre-render this you can do whatever you want but now let's look at the client side rendered version so here I have this CSR route and you can do one thing you can still use this loader when you're working on a spa on something else you can get some data and you can output this on the page usually what you're going to do if you're working on a spa you can use fetch inside of your component so here I have this component get quotes and I have this artificial delay set timeout and here I'm just doing the same thing fetching the data and I'm using this await block to get the quotes in sell and that's basically it but let me show you why this is a worse user experience so when I go here you're going to see first we get this loading spinner it takes a second and this really isn't great because first you have to load the page you have to wait for your JavaScript to load and now you can fetch the resource and you might be thinking but I can have the same problem with server side rendering this case is even worse I get a blank page and that's really a good problem to have because that's really a problem with your infrastructure and in most cases it's going to be instantly fast because it's already cached and it's it's a much nicer user experience and I also want to show you something else when you go to damy Json so I know a lot of people are going to have a question okay how do I do off with swell kit using a spa and that's basically just something you're going to have to Google yourself so Google swell kit Spa off or whatever if that's something you need but I'm just going to show you quickly in damy Json in their dogs how something like that might look like so here in their off example you just going to have to authenticate things always using a fetch right so you're going to make sure the user is authenticated you can use a swell store for that if you want so that's how you can deal with off in a single page application but as you can see I have some things here that aren't going to work in a single page application like this server side render route or this endpoint right we just generating a random number so if you're curious about this I just have this number Route and then actually here it is number so this is plus server TS so I can open this and this is just a random number so of course when you make a single page application you don't have a server you don't have an actual endpoint anymore so any file that has server in it it's not going to work when you make a single page application so you lose a lot of those nice things you're not using server side rendering but of course other things like this Dynamic route where we have some number and EXC or whatever else like slug right where you're doing something of course that is going to work because you're just using client side routing right so here you can see if I open this page I have this page which is a store and then I'm going to just show the data on the page all right so let's actually look at how we can make a single page application all right so to make a single page app in SW kit you first consult the documentation right and this is what swel kit already tells you you can turn any swel Kit app using any adapter into a fully client rendered single page app this is a mouthful a spa by disabling server side rendering at the rout and this is exactly what I showing you before so we can specify that server side rendering is disabled for the entire app boom that's how simple that is now we have a spa all right so now we can go here let me just close follow these files now I can go to the layout here and I can just say server side rendering false all right all right so now we have another option this really tells you what to do so you can use the static adapter if you want if you don't want to ship any server right if you just want a static HTML file where your SW app is going to live in so to do this you can add this adapter so you can go to a terminal you can say npm I and you can say let's see what do they tell you sjs adapter you can say swjs and slash adapter and you can do that and then it's going to be installed but you already done that step and you can also include the D flag here so it's a development dependencies and that's going to be basically it now we can do that but I'm just going to ignore this and let me start again the development server and now inside of our config here so let me find this if I go here you can see so config so now inside of here we just read the docs they just tell you what to do they just tell you okay repace place this adapter Auto by default with this adapter setting which are already done so what is really a fallback page well that's any route that you hit that's going to redirect to this HTML file and this can be anything depending on where hosting they use an example search and surgy has this documentation for adding a 200 Page for client side routing and they actually explain it better than me so now because you added this file into the root of your project now when a request or a URL comes in where you don't have a static HTML page it will reach your 200 Page instead so you can use your client side router that's basically why you need this page and this depends on where you're hosting this and yeah that's basically it so now there's a couple of steps and you have a single page application you can host anywhere but you're going to see you might run into some problems and this is another lesson that you have to keep in mind we're running this development server and everything looks fine I might have told you that server side R isn't going to work right but you can see it works perfectly and this is because this is just development so when you build this page when you host it you might run into another reality this is why the greatest tip I can give you whatever you're building the moment you can just host it on whatever platform you're using before you use any fancy API just so that you know immediately if you can use it or not otherwise you're going to run into a nasty surprise later right but let me actually show you something so here we have this config that looks beautiful and now here is going to be an build folder which is going to output for us but you're going to see you might run into a problem I'm going to say say npm run build and let me just increase the size of this so this just takes a second really simple page and then we can even run npm run preview so we can preview our page and then instead of 5173 it's four 1 73 so we can look at our build page and now we can see so k pass so when we go to server side rendering everything still works you can see client side rendering this is our endpoint this still works right even though this is not going to work when we host it but as you can see this is why it's important to host this projects and see what works and what doesn't so let me just close this quickly and another thing I have inside of here you can also use this to check for your param so you can check hey if this ID is a number or whatever else you want so even when we go to another route that's not supported here like nope we can have this error page and then we can see not found so here I have this error page inside this routes so you can customize this however you want and that's it's really going to work the same as before but yeah if I go here and now for this route ID number the problem is going to come if you want to pre-render this so it might be okay let's just pre-render everything let's see what happens I'm just going to say true because if you look at the build output you can see you have this 200 HTML so this is your swy app and inside your app here you have your assets and Etc these are entries so this is your entire app Fel together but you might want to pre-render things and then you might run into unexpected problems but let's just see what problem you might run into so let's just run npm run filed and then give it a second all right so now we run into a problem so it says the following routes were marked as pre- renderable but were not pre-rendered because they were not found where crawling your app and this might be cryptic at first when you see something like this because spell kid has to know which routes to pre-render and it does that by scrolling your site for links so if you go to the Spell documentation for page options you can see that it tells you here what you can do so if you don't have a link to your Dynamic route which spell doesn't have to pick up you can specify it using entries so you can specify these entries in your Dynamic route just like this or you can do it inside of the swel configuration but I honestly prefer to do it this way so let me show you what I mean and you honestly don't want to pre-render your entire app in this case so let just say here false this is going to be default and remember how I told you how soit is awesome that you can do this on a per route basis well we can actually go to Source routes and let me just look at this where you see ID number so here just going to open this plus page server TS file and now you can see you can just specify the entries so you can say Okay I want to pre-render these pages in going be id1 you can also say id2 and you can specify it on a per route basis now we can say say for this route hey export cons pre-render is true and this is also a great tip if you're not even making a single page application but are just pre-rendering your site you also might run into this problem and now inside your terminal let me just press contrl C now you can say npm run build and this should build this pages right so give it a second and awesome just expected so let's see what's in the build director you can see here it's app here is your entire app your entry app start nodes really not important what's side of here it's important that now we have these pre-rendered pages so now we have this page which is just pre-rendered in advance for us so now you can hose this or whatever else you want but yeah basically you can do something like that and you can see it's really simple so here we have this one two so this is the data for the page if you look at this if you have something here then this is just going to work and now we can see just by looking at the directory or this folder this is just really static asset of course it's going to work if you just put it on a regular server because there is no long running process right it's just serving these files and JavaScript takes over but of course your routing is going to work regardless and actually for the last part now that we have built this we can just Host this on search so let me show you how to do that and I'm going to use surge as an example because that's what swy does in their docs all right friends so let's Host this site on surge which is really simple and again I want to emphasize inside of our config here in this case we're already using the static adapter which is going to pre-render our site so it really doesn't make sense inside of Rous that we specify pre-rendering to true because it's already going to pre-render these things and I just wanted to show you that that is an option right so now we have all of this configured again double check everything right you have the proper adapter you have this thing specified here for the fallback page and now we can just go to the other documentation again we always need to read documentation right so let me just close all of these files just so it's easier to read and I'm just going to open search sh and again we're going to go to their docks and let's see are we zoomed in so now we can do this and let's see getting started with search so how simple is this friends right the only thing you have to do is run sege and I don't want to install it I'm just going to use npx surch so now we already build this site right we have this build output here the only thing I'm going to do inside our terminal is going to say CD build and I'm going to run npx search cool so now in this stage if you're following along you're going to have to register as you can see I already registered and I'm just going to specify okay this is the path you're going to get a random URL I don't know if you can change this you probably can but you can see the URL is going to be fascinated camera okay right now you just press enter and boom that's it just give it a second and your site is hosted this is just static HTML so we can go to this URL you can see just took a second as you can see our app is hosted live on the internet how awesome is this friends and I already told you why it's really important to test your s because this server side render route isn't going to even work it's going to cause this weird issues right so you always have to test and then you're going to see it doesn't work so of course this works CLI side rendering works of course no problem here it is our endpoint is not going to work right because like what is it like we don't have a server right so we're always going to get nasty surprises if you don't test your page as you can see our default error page works beautifully again you can use this Dynamic routes we can go to one we can pass it other numbers two three four and Etc so you can get things from the URL you can do whatever else you need to do and of course if you're tired of your site you tried it let's see we can also remove it so we can tear down a project if you go to search and we can just say search tear down and the name of the project so let me just see so this is fascinated camera and we can just go here to our terminal clear everything contrl L and we can say npx search tear down and we can just paste our site without the URL of course and then it's going to be gone let's see and boom that's it friends so now the site has been removed and it's really easy now you can share this with your mom or whoever else you want to right and yeah that's basically it all right friends so if you like what you're seeing don't forget to like And subscribe and you can also support me by becoming a patron thank you for watching and catch you in the next one [Music] peace

Channel: Joy of Code

Views: 13,832

Keywords: sveltekit, svelte, spa, ssr

Id: plBW8pbpOe0

Length: 20min 54sec (1254 seconds)

Published: Thu Nov 23 2023