When To Use Page Versus Standalone Endpoints In SvelteKit

hey friends welcome to using cell kit endpoints the goal of this guide is to give you a mental model at the end on when would you use page endpoints and when would you use Standalone endpoints this is something I often get asked about and it's what most people are confused about so the goal of this video isn't an introduction or a guide to cell kit endpoints for that you can watch my entire swell kit video or the Standalone video made on endpoints and as always the post and what I use it in the description so you can check that out so to understand endpoints first you need to understand what is even the goal of swelkit right so let's look at client-side rendering and server size rendering which are the two popular rendering methods that are most frequently used so the problem with swellkit is that it blurs the line between front and back end right that's what confuses most people but let's say for example that you're using client-side rendering so you build your spy you're happy right and you'll be familiar with this sort of call so this distinction between front and back end is obvious because you can see you're using fetch you're picking some third-party API or whatever and then you're just rendering it on the client and everything looks great but the problem with this is that JavaScript first has to load on the page so now you're fetching the data and then you're returning so you're making a round trip and this causes loading spinners for your use as another downside is if you go to the page source and open it you're going to see none of your data is here because this is just a HTML shell right but the distinction is really clear between front and the back end so we have something like server side rendering if I go to that example so you can see it looks the same but if we look at the code here you can see here we have some data from the server right and this is really starting to get blurry like where is this data coming from but this is just server side rendering so this is the point of circuit so you have your backend file or plus page TS this doesn't really mean that it only runs on the server if you're already familiar you already have a DOT server file also but in this case this can run also a load function on the client if you need which you're going to look at an example later so basically the point of this you want to fetch this before this component mounts and then we can use this load function to pass any prop to the page so now when you go and view with page Source you can see here is your actual markup here which is great for SEO and is a greater user experience let's look at another awesome example because in circuit you can use these endpoints to fetch data dynamically so if we can go to this example here I'm just having this endpoint so get post here's his function and here's the Json placeholder API and of course you usually don't do this in your project right because you don't use a third-party API like this because you don't own the data you don't change it but I'm just using this for example so you just have some data but of course you can always fetch some data save it in your database change it and format it however you want as you can see here it accepts an ID and we can just get the ID from the params so basically here whatever you input or want to Etc if I go for example to 2 is going to dynamically fetch the data from the Json placeholder API and this is really awesome and then again you get this data from the expert LED data prop and you can just render it on the page or do whatever else you want another thing you're starting to notice is that usually this plus page of sales file is accompanied by a plus page.ts file so it's like the rule of two in Star Wars for the seat where there's always a master and an apprentice right and knowing this removes a lot of confusion because a standalone plus page TS or plus page.servertis file does nothing it always has to be accompanied by a page which which is always going to be in some folder because they have to be together based on the file system routing as well kit and of course you're also familiar that layouts can also have their data and that's the same story so now you know that these files always have to be together but sometimes there's an exception to the rules and only the safe deal in absolutes so let's look at an example when you can have free files at the same time so you have a page file you have a page TS file and you have a page server TS file so when would this really be useful so for example we can look at this example here I'm fetching some images so here I have an endpoint I'm just getting some images from Json placeholder API which I'm passing a limit so I have 20 images then I'm showing them here and this is really great but then for example if you navigate usually to an image it's going to navigate to a page then it's going to cause some flickering or layout shift and it's going to load but maybe you want to defer navigation until the image has been loaded so let me show you that example quickly here if I go to the network Tab and I'm also going to disable cache let me show you how that looks like so here I have this route which takes ID so you're going to say ID for the image run Etc and let me just show you this so we're going to fetch this on the server but another awesome thing is that you can pass the data from the server load function to your load function on the client so now as you can see I'm doing something interesting I have this load function here which takes the data and then we're going to check hey if we're in the browser context because this runs on the server and client we're going to load the image which is just using a promise we're going to create a new image we're going to use the event listener on load just so that the promise results really don't care about what these returns or anything else and this is going to basically block the navigation which is going to be fast and of course it's also going to start pre-loading but this case I disable preloading which is by default enabled in app.html so your app is going to be a lot faster but now look at this I'm going to go to North rutling let me just use fast3g so we don't wait forever now when I navigate what you should see is going to load the image first before it navigates so pay attention to the network tab as you can see slowing the image is loaded and boom immediately navigated if you weren't doing this it would just navigate immediately and if you're in a slower connection this would cause a layout shift and this is really cool but let me show you something cooler in the next example another thing that you should know is that circuit has this concept of universal and server load functions and now I can open this in a circle documentation so let me just close this and I'm going to zoom in so you have a ncert scene so you can see Universal versus server it basically distinguishes Universal load function which are located in page.ts layout TS and Etc and if the file extension has dot server then it's just a sorry function basically this isn't really that interesting to us but the output is so Universal load function can only return an object containing any values including things like custom classes and components ah so you can get a swell component and a server load function must return data that can be serious with the value which is a library that rich here is also made which is like Json stringify button stairs which circuit uses but yeah let me show you how cool this is so here I have this endpoint as you said this is a universal load function so you can only do this here so you can see as usual we can return any props or whatever but look at this we can also return a component so I have this counter component here and basically you can use a dynamic import you can import it however you want and then inside of here we get it over the data prop so you get the data title as usual but look at this now we can use the swell component which has a disk prop and we can pass the data component and now you're passing this component to the page and this isn't possible using a server load function but let's have a quick look at server load functions this is what I said before so they can only return data that can be serialized with the value which is this Library this is what the silky docs refer to it uses this so basically this data can include anything like big int let's see I have this example here it can be so it's usually have your props title and Etc data you face it can also handle big in the date map set and even a regex so as you can see here on the front end I just installed the value and I'm just going to also console log it so you can see what's going on so here is an object you can see here is a begin date map projects and Etc and this really isn't that important I just thought it was cool to let you know how this works the coolest part about working with data in cell kit is probably how the data flows through your routes which you can pass like a hot potato so let's look at an example how we can pass child data to the parent if I go to this example here if we navigate to a child route it's going to trigger the load function which is going to update the page store that I'm using here in layout.cell so as you can see I'm just using this layout and basically this is a store right so you're subscribing to the store you might be thinking we're passing the data up you're not passing any data up this is just a store we're subscribing to this value which is going to get updated if I show you here so I can use my snippet and I can subscribe to the store so now you can see this data here this is what every page has so this data and now if you go to the child route you can see ah this updates and this is going to update the title here for SEO or whatever else you need you can make this title for example fly or change color you can do anything you want so this is just a child route which is slash child and that's basically it there's nothing special here and just returning from this load function title in the description and this is what gets updated so for example you can see here is the title but now since you're subscribed to it right when we move away from this page is going to update and this should be undefined here but you can set a default value or whatever you want so you can see here we're using it dollar sign page data title dollar sign page data description so if I go back this should be undefined because we don't have any fallback here but you can include this if you want and how awesome is this friends let's look at one of the best features of cell kit in my opinion that's working with forms and to be more precisely form actions so if I go to the form exactions example of course if you're familiar in the past with working with forms you have a server you make your endpoints and then you ping it but now you have to manage all of that yourself with JavaScript fetching the data error handling Etc but look how simple this is in swelki just because we're using a plus page or server TS file so you have a form here which can only post using this method so we can just specify an action here which is just a query param and then we're using these strings or sulky knows hey I should map this action to Method so for example here we have two actions you can log in or register so you can say question mark login and then here we can override it by using form action and we can say register so now in our endpoint here how cool is this we can just specify actions we don't need to concern ourselves with all of the junk we can just get the request we can get the data from the form the email password Etc we can do some checks we can use cell case error handling using fail and now back again here if we make some mistake for example test and then I don't include my password or whatever invalid credentials and Etc so you can see how simple this is and can you find any fetch here I can't right as you can see how awesome is this and you would have to basically implement this all by yourself if you're using a standalone API endpoint alright so I already hope it's starting to help your mental model what page endpoints and what Standalone endpoints are used for but of course we're going to talk about the use cases for Standalone endpoints so a standalone endpoint you can use it for anything compared to using a page endpoint that can only return some data for your page usually as you see in some Json right but a standalone endpoint can return anything to return text Json XML for your RSS feed you can generate a CSV file PDF file you can make a rest API you can use inside your app or you can expose publicly by setting course headers on your endpoint but let's look at the most basic example for a standalone input second go to this random number generator as you can see if I press this dice it's going to give me a random number so how does this really work well as you've seen this is a server only file so this runs only on the server and here we have access to all of the HTTP request methods so you have get post patch put and delete and you just export this function like this and now thanks to this URL we can see what the user passed in the URL and with that query param is Max we can say Okay use max or set it to default as one we can pick a random number using math random times that number and then we can return a new response with just the web standard this isn't even specific to 12K this is why this is so beautiful because you learn about web standards and then you just turned into a string which is a random number as you can see how to use this so now you can use this anywhere in your app we can just use this using Fetch and of course I have this random URL but if I go here for example let me just open in a new tab and I can say my endpoint random number and this is what this is really it's that simple it's nothing complicated right so there really isn't a right or wrong way it's basically what you want to accomplish if you want server-side render for example but fetching your data in the client and is causing a bad user experience and it's slow then of course it's really not a great approach but if you want something like server-side rendering then you know what to do right and you also shouldn't be afraid I see most of the time people ask okay when should I use a DOT server TS or a page.ts file and basically any file that has server in the name like server.ts or page authorities can only run on the server which means you can read from the file system you can read from the database and Etc even if you do something we should say in quotes wrong like trying to use a database using a page DS file it's not going to work it's just going to explode as well it is going to give you a nice error is going to say hey you're trying to use this on the client maybe don't then you just rename the file and boom you can move on with your life so don't concern yourself about what is the right approach on Etc because that's really not important it's important what your goal is remember how I told you the standalone anyone's can return anything well basically this is again what I'm talking about everything depends on your goals if you want an RSS reader on your site this is the only way to achieve it basically start thinking about your goal I want to return XML how do I do this oh I create an API endpoint and return the XML so if we go to example here I can open the XML feed and hear everything works great of course this isn't a proper XML feed it's just an example so you can see here is nothing complicated we're just using the get method because we just want to get the XML and then we specify this header content type application XML and then we can just generate this as a string and then we can say return your response XML with these headers so the browser understands that we're sending RSS so you can see everything works great and if you need an actual RCS feed for your site are linked in the post to how I've done it on my site so you can see it's really nothing complicated it looks similar I'm just getting the post again and looping over them and basically that's how simple that is let's look at another example file generation so for example you can make an endpoint that can create a spreadsheet or PDF so you can return a CSV PDF file and Etc and basically this is how simple it is so I'm using this Library PDF kit and then I create a new PDF document and it has API you can read how it works if this is something you need to do so I'm just again returning to return new response PDF and I'm setting some headers content type application PDF and contact this position and how do you find yourself well you search how to do it right and this is also the beautiful thing for example if you wanted to figure this out you wouldn't search for swellkit PDF just search for something more generic like node.js creating a PDF or maybe using a library like Express because basically this is what Standalone API endpoints are is the same thing if you ever use something like Expressway returning an endpoint and that's basically it so if you configure figure out how to do that for those more established libraries that have more examples right so this is something great then you can just pour that example over to swelkit that's how simple that is you don't have to look for specific selfie examples because it's just using web standards so let's look at the last example for Standalone endpoints which is creating a post API so as I said you can use Standalone outputs for anything you can create a rest API that you can consume inside your app or outside your app as I said if you include core scalers so let's see how something like this is awesome so if I go to the Post API as you can see here I'm fetching all of this posts which is a hundred post I believe let's see so how am I setting this up so I created a standalone endpoint post slash plus server TS right as usual and now I have this function get post I can pass it a start and end number so arrange and then I can even specify a user so I can filter where you can do so much more you can do categories and Etc then imagine if you have a categories route you can just use this existing data and you don't have to duplicate your logic in other endpoints so as you can see here nothing special I'm just fetching some post for some dummy data right and then I'm checking hey if this has some user data then we're going to filter the pose based on the user otherwise we're just going to slice it start to end and that's basically it so how do we get this parameter this is an awesome part so if I go to the Post API endpoint here you can see by default gets 10 posts so these are always going to be 10 posts but then we can also look with range parameters so here we're saying 0 to 100 so now this gives us 100 posts so now look at how flexible this is this is the power of Standalone endpoint so now you can say something like four or I don't know whatever you want you can just say two and get two posts but let me also show you something amazing also but now we can also get the pose with the range but we can also filter them so now if your gears are starting to spin now we can use this for pagination or whatever else you want so if I go here I'm grabbing zero to 100 posts I'm only grabbing the poles that have the user ID one otherwise I can specify a user with an id4 and now I'm only going to get this post and now you can do whatever you want you can even filter it add your own parameters and Etc and basically how simple this is so when we hit this endpoint we can drag up this and the structure URL so now we can get start and using URL search params get with the name right here and the Beautiful part is that this also doesn't matter the order of these parameters this is why the web is so beautiful because of course you can just use a function and do this but you can just use the URL as a state manager right and now you also get the user ID and then we just pass it to our function get post and that's it and now we can get it here we have some default values right but that's how beautiful that is alright so I hope this wasn't that confusing as I said the call primarily wasn't to give you some working examples or how to do this or that I just want to give you quickly a bunch of examples so it improves your mental model how this works and the only thing we need to talk about are server only modules so let me open this in the docs and now I can browse this solar server only module basically this is any file that ends with DOT server but you can also have server only modules if you place a server folder inside your lib folder so as you can see in the silky docs here talks about private environment variables but this is what I'm talking about your modules you can make your own module server only in two ways by adding a DOT server to the file lanes for example secret.servert TS and you can place them in lib server so they're going to be server only of course you wouldn't store your environment variables use environment variables that swelkit provides for it right but this is more something like let's say that you have Prisma you're connecting to it just connect to Prisma in adult server TS file so you can't import it by accident in a client file or if you have any secrets and Etc alright friends that's it don't forget to like And subscribe and you can support me on patreon and don't forget to join the Discord so thank you for watching and catch you in the next one peace [Music] thank you [Music]

Channel: Joy of Code

Views: 5,964

Keywords:

Id: 8OmsVZuuQMc

Length: 18min 44sec (1124 seconds)

Published: Fri May 05 2023