When To Use Page Versus Standalone Endpoints In SvelteKit

[@JoyofCodeDev]

🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite

[@mikle1404]

Brilliant as always! Just one of the best Svelte / Sveltekit content creators out there.

[@ScriptRaccoon]

I always thought it is pretty easy. Server loads give you the data for intially rendering the page. Endpoints give you additional data, which are retrieved when the user requests for it. Form actions are somewhat in between, but since classically a form reloads the page or even goes to a different page, it makes sense to colocate the form actions with the load functions. But in the video you have explained lots of other things as well. I think a good summary is: load function = data which is needed to build the page, endpoint= data the user requests.

[@ScriptRaccoon]

PS: the title of the video suggests that there are "page endpoints" and "standalone endpoints". I would say this is a bit unfortunate, and actually could trigger more confusion. The server.ts file is not an *endpoint*. It is just a file with the load function (and form action handler).

[@JoyofCodeDev]

It is a page endpoint which you can confirm when you look at how client-side navigation works as it returns the JSON for the page (in the past this was named a shadow endpoint).

[@June-c2q]

It was more like a list of examples and use cases rather than a guide for creatig a mental model. But I always appreciate your video, thanks for the content

[@i2zo_]

Crazy, I asked myself this question yesterday, timing is great ! Thanks for the vid

Amazing content like always, the best content in youtube and explain on an easy way

[@manuelalejandrosaezpalomin3904]

Man, your content is gold, you have taught me a lot.

[@JoyofCodeDev]

I'm glad to hear that! 😄

[@adimardev1550]

sveltekit is super awesome just as your channel is awesome!🔥🔥

[@JoyofCodeDev]

Thank you! 😄

[@magick93]

Fantastic! Thank you! I'd be keen to see more about dynamic components

[@JoyofCodeDev]

That was it to be honest. You can send components from the server if you need to and render it inside your component. It's not something you're going to use often but useful to know about.

[@what1heh3ck]

I dont get what you mean at 18:00, can you please explain it further why we dont do that?

[@JoyofCodeDev]

If you have secret environment variables don't store them as variables inside a file but use SvelteKit to manage it and only use them on the server.

[@lian1238]

At 5:21 in my opinion, when the user clicks a link, it’s cool that there is no layout shift but waiting one second before any visible UI change happens is not a good user experience, especially if the user’s internet is slow.

[@JoyofCodeDev]

The experience would be the same even on a fast connection but you wouldn't notice because of preloading and using aspect ratio on the image helps prevent layout shift.

[@lian1238]

@@JoyofCodeDev I am building an webapp which would also be an PWA. For mobile users, during testing, I felt about a 500ms delay when clicking on a link, which is a noticeable delay. (I want the app to be as responsive as a native app) Preload on hover isn’t viable on mobile devices. (I haven’t tried on tap, just realized it’s an option) I settled on the strategy of showing a loading icon with onMount and populating data that way.

[@JoyofCodeDev]

You could preload the visible links you want on the page.

[@johntierney3353]

Say I want to play a video in my svelteKit app. But first I have to transcode the video file using the program ffmpeg and send the ouput to my app.. Would ffmpeg be executed as a standalone endpoint or a server-only module?

[@JoyofCodeDev]

That depends are you doing work using FFmpeg in that module or you're doing work when you hit the endpoint like a webhook.

[@yt-sh]

thank you for making this app

[@JoyofCodeDev]

You're welcome! 😄

[@strongop7654]

What about a video soon explaining how to fetch data from stores, and how to deal with endpoints and custom stores? It would be great!

[@JoyofCodeDev]

You shouldn't use stores for that because a store is an object in memory on the client and doesn't exist on the server.

[@strongop7654]

​@@JoyofCodeDev I know that stores should not be use in the server side. My point is if there is a good way to receive the data from the server and store it in the client in a store. The issue is that if I don''t want to make a request (and not showing the 'Loading...' ) every time I visit the page, I need a way to keep the state. I guess that then I should use only client side, and create 'muscled' stores doing all the fetching and keeping the state. Am I right?

[@JoyofCodeDev]

@@strongop7654 Sure, you could update the store when the data for the page updates.

[@rafi_45]

Sick. You are hero.

[@rzzo]

Solid video! What would you suggest api wise on how to send an email? Example would be a forgot password email, or confirm account email?

[@JoyofCodeDev]

Doing everything yourself? I don't know but you could make an API for it like anything else or use a paid service.

[@rzzo]

@@JoyofCodeDev well like nodemailer and mailgun or something.

[@d47im5e]

Hello, about the the pagination and filtering endpoints in the POSTS API section, I am doing basically the same thing in java and problem for me is, every request is making the backend call the same data fetching operations(what i mean with an example from the video - when you call the posts api endpoint from browser 20 times, is is going to call jsonplaceholder site every time, which is unneccessary IMO). For performance reasons i have to think about caching etc.. on the backend so that endpoint calls are more elegant. So my question is (at long last 😊) are there any solutions for nodejs-side for this? Any quick links for me to check out? I was gonna ask chatgpt for 'node caching, any solutions?' but i wanted some human connection 😊.

[@JoyofCodeDev]

You can set Cache-Control HTTP headers on your endpoint and I also hear people often mention Redis which you can look into. Also I completely understand and if you want people to talk to consider joining the Discord: joyofcode.xyz/invite.

[@WyzrdCat]

I love your content.

[@onepointproduction9092]

Superbbbbb

[@EvangelhosDosDias]

First Brazil