5 Things I Wish I Knew When I Started Using SvelteKit

this is one of the things that really tripped me up when I was first learning spell kit this script tag right here actually runs on the server as well as the client for number one I want to begin with load functions load functions are one of my favorite features of spell and when I first started using them I didn't realize how much they could actually do a normal load function the way you'll typically end up using it is you'll go through and you'll have some asynchronous function here you'll typically have like a database call or some authentication check here so I'd do something here like a wait fake fetch I would have my stream data here I'd have my normal data here I would have all this returned then my client would end up utilizing this and then whenever whatever I go onto this page itself I'll go ahead and refresh it and it'd take like 3 seconds to load because I'd be fetching everything and that's how you would typically do things what I didn't realize at the time is that load functions can actually stream data down to the client and what does this mean well streaming effectively means that I can return a promise from my load function and instead of blocking the entire site's loading on the long fetch it will render the site and then on the front end itself we can just await the streamed data like a normal promise so what I can do is I can go back over to my load function we can get rid of this await I can go ahead and save this and if we go back over to this page and reload it's going to say loading my streamed response for 3 seconds and then it'll populate in the Stream response so when a new user comes to the site they don't have to wait for that 3se second long call to get content no they're just going to get all the quick content down they're going to get their initial state of the load function populated and then we can update the UI with the actual loaded content once it's ready and this is an incredibly potent way to make your uis look and feel far far far more performant the next thing I want to talk about is the layout system when I was first working with spel kit I came from a react background I have a very component-based way of thinking about the web so getting into spell Kit's very heavily page-based model was kind of a mental shift for me what I did here is I just have a Navar up here which has a link to the first page and a link to the second page in this little slot and by putting this layout. spelt at the root of the nested directory the page within first and the page within second are actually loaded within the slot of this layout so here it doesn't look that fancy it's just like okay we're just sharing a nav bar between these two but to give you a real life example here this is a real life e-commerce site I built in spel kit and the UI for this little dashboard admin page these are all individual pages so when I click between images and I click between tags and I click between sizes I'm actually navigating between different pages my URL is actually changing here that may just seem like okay it's a convenient way to share UI but it's even more potent than that because remember with spel kit everything is very page based we have our form actions and we have our load functions which are directly tied to our page. spelts so since I can Nest pages in here I can Nest load functions in here this images has a load function instead of having to be like a component or something then that component fetches an API route it gets its own collection of load functions and form actions which are directly attached to it so So within this example here within my first directory I could add a load function which would call whenever I go to the first route but not whenever I go to the second route so you can see how if you're building like a dashboard or more complicated UI it's really powerful to be able to put Pages within Pages effectively that's really what you're doing you're creating a layout and then you're just swapping out what's being rendered within an individual section it's a different way of thinking about things but it's really great once you get used to it and the number three biggest mistake I made when I was learning spelts is not being subscribed to this channel no I'm just kidding the actual number three is not utilizing the incredible ecosystem that spell kit has uh whenever you look up spel kit or you listen to what a lot of people say online you're going to get the impression that spel kit does not have nearly the ecosystem or support that react does and while yes it doesn't quite have the same level of packages and there are a lot of things missing and a lot of products do focus on react before spelt spell kit has a pretty extraordinary ecosystem of packages that are built directly for it that allow you to make some pretty extraordinary sites and I want to highlight a couple of them here the first one is obviously going to be Shad cenel this has become my UI library of choice if you go into my current biggest spell kit production site when I go ahead and hit this add to bag button right here that little pop-up drawer is actually a Shad Cen component the best way I've described this in the past I think is they're kind of like Lego blocks you just get all of these little pieces and blocks that you can just kind of put together and customize a little bit you can use to create beautiful user interface the next one I want to highlight is Lucia o Lucia O is a fantastic way to run authentication in spelit apps it is a authentication Library it gives you a bunch of really nice things to put into your spell Kit app to handle authentication it's really quick it's really simple and easy to use and one of the best parts of it is that your off lives in your database it's not a full provider it's just a nice way to handle authentication it works in a ton of different Frameworks but I found the SPID support to be first class and then the last one I want to highlight here is going to be super forms this is one that personally I've kind of underutilized I kind of just run my form actions in a pretty janky way and just put Zod form data on my form data and call it good but if you want to do more complicated form stuff and want to get that nice end to end type safety super forms is the way to do it it's a fantastic project uh one of the biggest and I think best that spell kit has and I highly recommend checking it out for your projects and for number four I want to talk about the distinction between the client in the server and really more about serers side rendering this is one of the things that really tripped me up when I was first running spell kit I did not fully grasp the concept that this script tag right here actually runs on the server as well as the client I want to illustrate this real quick with this little console.log here if you go into the actual example here and I refresh you're going to see hello there in the console makes sense that's what we'd expect but you know what else you're going to see you're going to see hello there in the actual terminal of the server so it is running on both the client and the server the way to get around this is to go ahead and add an effect in here we're using spel five runes in here because that is going to be so hype when that comes out I'm so excited um so hello there new we're going to go over here and then if we refresh we're going to get hello there new and hello there new is not going to show up on our server so you want to make sure that you understand where things are running there's a lot of intricacy and Nuance between the client and the server and spell kit the BL lines the lines get blurred like for example the page. TS file that can run on the server but it can also run on the client versus page. server. TS only ever runs on the server and there's a lot of nuance here not going to get too deep into all of it in this video cuz frankly I think that there's a place that explains this way better than I ever could and that's going to be my number five thing that I wish I did when I started spelt and that is the official spell kit tutorial the official spell kit tutorial is genuinely amazing they did a phenomenal job of taking you through pretty much everything you know to build production grade spel kit apps uh the first two parts are just about spelt so that's going to be like client side reactivity stuff and then part three and part four that's when we get into spell kit that's when we get into our different API routes our routing our loading data and when we get into like the advanced felt section they have really great breakdowns on CSR SSR pre-rendering tailing slash all these really important Concepts which I think the best way to understand these is to actually run through this tutorial rather than me just telling you go actually play with this in the documentation and see how it works for yourself you will learn a lot definitely go check it out

Channel: Ben Davis (Davis Media)

Views: 11,644

Keywords: Svelte, Javascript, JS, TS, TypeScript, Programming, Tips and Tricks, SvelteKit

Id: eJpPNg-v0Fo

Length: 7min 26sec (446 seconds)

Published: Fri Apr 05 2024