Loading Data in SvelteKit (+page.js & +page.server.js)

[@Huntabyte]

UPDATE: When destructuring data on the +page.sveltes, do -> $: ( { products } = data ) instead of the way I demonstrated in the video.

[@jrmsrs]

4:05 specifically

[@pickavana8056]

no explanation of why you are making this reactive

[@Jack-vv7zb]

why

[@jean_luc_retard]

why

[@EvertvanBrussel]

Why indeed?

[@libertad83y]

It's amazing how the same topic explained by 2 different people give so different results! You are a natural born teacher, no AI can replace you soon! 😂

[@Huntabyte]

Wow, thank you for the kind words. It means a lot! 😄

[@darbhasailu]

finally someone explaining new sveltekit nuances in a understandable and human friendly way thank you

[@Huntabyte]

You're very welcome!

[@dallenbaldwin3484]

for those coming to this later, we don't even need dotenv to get our env variables. you can import from '$env/static/private'

[@Huntabyte]

Yes, I completely forgot that it was a thing when I made this video!

[@smoqi3387]

dude, it's the first time i learn something since i started exploring javascript libraries, i tried react, nextjs, vue and some others from other youtubers. Thanks a lot you're definitely one of the best teachers out there.

[@MrJoegotbored]

The documentation of this functionality is less than clear. Been struggling with it for 2 days now and your video instantly cleared up the issue I was having! I'm excited for their beta to be over and for them to get back to documentation, but until then, I have your talent and videos to help me out!

[@Huntabyte]

I’m glad you found this helpful! Let me know if you have any additional questions or uncertainties!

[@kylestubblefield3404]

I am building a student information system for a local private school, and I stumbled upon your prisma+sveltkit video. I needed more context for the video so I came back to watch all your sveltekit videos. Earned a sub 5 minutes in. Great content, keep up the good work!

[@edwarr2]

Thank you thank you thank you. This is the first thing I've encountered that actually explained the difference between page.js vs. page.server.js execution in terms I could understand. Brilliant!

[@Huntabyte]

You’re very welcome! Thank you for taking the time out of your day to comment, I appreciate it!

[@joelpoh]

Thank you for putting out this video! The demonstration and explanation was clear and concise and most helpful.

[@Huntabyte]

You're welcome, I appreciate your feedback! Let me know if there's any other topics you'd like me to cover and I'd be more than happy to consider it!

[@joelpoh]

@@Huntabyte would you consider doing one on how to implement authentication with http-only cookies?

[@Huntabyte]

​@@joelpoh I sure would! Do you have a specific database preference?

[@joelpoh]

@@Huntabyte thanks and sorry for the slow reply. As for the database, any one is fine

[@pickavana8056]

@@Huntabyte supabase

[@mhemaungthuwin7916]

Currently I'm falling in love with SvelteKit and PocketBase, and your content is the exact things I'm looking for. Thank you so much.

[@Huntabyte]

I’m glad to hear that! If you have any questions along the way don’t forget we have a discord community to support you!

[@mhemaungthuwin7916]

@@Huntabyte Thank again sir.

[@Nrde]

Nothing to add to the previous comments, just adding a comment to help the google algorithm to make this known for wider audience. Very good content!

[@Huntabyte]

Thank you, I appreciate that!

[@charlessexton1483]

You're a legend. I'm getting back into Svelte after many months away and the whole +page stuff is far from intuitive, although the functionality is incredible. You've explained it so well. Thank you.

[@Huntabyte]

I'm thrilled to hear that! Thank you!

[@gangliezhu7951]

Very concise explanation. Even me, an absolute newbie, can understand. Thank you for creating this video.

[@Huntabyte]

You're very welcome!

[@timsonner]

This SvelteKit video series is super helpful right now, thank you.

[@Huntabyte]

I'm glad to hear that, thank you!

[@markobogosavljevic3336]

Sending a comment for the algorithm lmao. Very nice video dude, I'm glad youtube recommended me this video lmao.

[@Huntabyte]

I appreciate the algo support 😂 and thank you for the kind words! Please let me know if there's anything else you'd like to see!

[@MatheusCardosodeAndradeSilva]

You just cleared the most important thing that was blurring my mind about Sveltekit. Thank you very much!

[@Huntabyte]

You’re welcome! Let me know if there’s anything else you’d like to see a video on!

[@peterhamilton9387]

Love your style. Fast, informative and concise. Would love you to do a full Svelte Kit tutorial … please.

[@Huntabyte]

I'm glad to hear that you like the style, I try to make content in the same way I prefer to receive it! Since a full on SvelteKit tutorial with details covering each capability would be a multiple hour long video, I plan on releasing a bunch of videos relating to the individual capabilities first, then a video on building a full-stack application. That way, if anyone gets confused along the way, they can reference these more detailed videos!

[@peterhamilton9387]

@@Huntabyte Sounds awesome! Keep up the good work 👍

[@bjul]

This was great! Big appreciate. Just getting started with SvelteKit and this cleared up a lot of confusion. Good teaching style. Keep this up!!!

[@DrShmuck]

Try setting your VS code to sort by filesFirst and increase the size of the indentation. It makes it much easier to kinda grasp which +page belongs to which route.

[@Huntabyte]

I have tried setting the filesFirst and it felt a little too foreign but I typically have the indentation further when not recording (for screen real estate sake).

[@onepointproduction9092]

Superb..... my head is crystal clear now when i read doc after this videos, thank you so much

[@Huntabyte]

I'm glad to hear that!

[@BryanKlein]

I need to update my existing SvelteKit sites and this made the work I have to do very straightforward. Thank you!

[@Huntabyte]

I’m glad to hear that, thanks for the feedback!

[@mxm460]

good video, docs are so confusing without an explanation like this, thanks

[@Huntabyte]

Thank you! I was also confused at first. The SvelteKit team has admitted that their docs are lacking, especially compared to Svelte’s. We should see improvements to the docs with 1.0!

[@mxm460]

@@Huntabyte If you are gonna make more vids like this, I'd like to see one on the new "form actions/enhance" or a general sveltekit API/endpoints tutorial. Thanks again.

[@cholasimmons]

"nowadays we're spoilt with internet speeds", i like that line, I tell people too that we are so spoilt by computing power nowadays that few people add efficient methods into their workflow, especially Apple users and Photoshop 🤣

[@lucasneuhaus3138]

Finding your videos was game-changing in my Svelte learning. Instant subscribe

[@Huntabyte]

Thanks Lucas!

[@cory2300]

Great video, really clean and concise. The format is awesome! I totally forgot about pre-fetch. Apparently you can even put it on root level tags to apply to your entire app (if you want). Remember Svelte now has in-built handling of .env variables!

[@Huntabyte]

Thanks for the kind words and feedback! I am aware of the built-in handling of .env vars, old habits die hard and I tend to forget it exists. I will certainly take advantage of them in upcoming videos! Regarding the root-level tags - for this video, I decided that placing them directly on the tags would make it easier for the viewer to understand. Again, thanks for your comment, I really appreciate it!

[@MattHeslington]

I'm so pleased to have found your channel. I love your style of teaching and can't wait to work my way through the series of SvelteKit tutorials you've now put out. Thank you!

[@Huntabyte]

Thank you for the kind words! Please let me know if there's anything I can do to help!

[@JLO-qy5to]

Absilutely perfect. The load function was a thing for me that I've wanted to use but have been worried about the functionallity and if I get this running: Your video helped me in just 10 Minutes!

[@Huntabyte]

That’s awesome to hear! Thank you!

[@rossvold]

Thanks for making this! All i need to learn now is how to do the opposite. Sending data from a from to a database.

[@Huntabyte]

You want to look into Server-Sent Events! You'd have to deploy SvelteKit with `adapter-node` for it to work though!

[@rossvold]

@@Huntabyte Thanks for giving me a direction to look 😅

[@drinkvodka1831]

This tutorial was exactly what I was looking for. Perfectly explained, thank you.

[@Huntabyte]

Glad it was helpful!

[@CoreyDamocles]

SvelteKit made fetch happen. Great tuts, Huntabyte!

[@Huntabyte]

Thanks, Corey!

[@luciusrex]

this was super helpful, just the way the information was presented was on point! thanks!

[@bmehder]

Great explanation. I am looking forward to watching all the videos in this playlist.

[@Huntabyte]

Thank you! I’m glad you’re here!

[@DionisiusWahyuAdiSaputra]

Crisp & clear! Deserves mor subs. Keep it coming man.

[@hello_world_104]

I had no clue about what server really meant or realize that stuff could occur in hosting env before sent to client. I thought ssr still happened on client computer in some behind the scenes thing. Very cool

[@Huntabyte]

Glad you could learn something here!

[@achequisde]

For those coming after SvelteKit migrated to v2.0: load functions don't automatically await for top-level promises anymore. You should use await as in the first version (still blocking), or await Promise.all([...]) to avoid the waterfall.

[@felipebereilh3856]

Thanks!

[@Xavi7th]

How can we do this?

[@joewilliams8286]

Just found your channel bro, great explanation! Thanks for taking the time to create these tutorials for us. 1+ sub

[@paterfamilias01]

So great to see some updated tutorials on sveltekit.

[@bobbyLovesTech]

THANK YOU SO MUCH! This is perfect. Just getting started with Sveltekit and it makes sooo much sense

[@MarkDacre]

I'm officially a fan of your teaching style. I don't usually comment but wanted to add my voice to the growing chorus. I'm glad you post this stuff for free (how else would I have found you!) but I'd gladly pay for an in-depth Sveltekit course.

[@Huntabyte]

Thank you! That means a lot!

[@JacobDuenke]

Really great video! We’ll put together and little to no faffing about getting to the main points.

[@Huntabyte]

Thank you!

[@nickstaresinic9933]

Really stands out as very well done: important content, clear organization, & concise presentation. Thanks.

[@Huntabyte]

Of course! Thank you so much for the feedback!

[@DavePerth]

Awesome, thanks so much - would to see this extended to run through a CRED example - maybe using Supabase or Railway db!

[@Huntabyte]

Noted! Thank you for the suggestion! That's definitely something I will consider.

[@danielkott4772]

Great content and clear explanation. Hoping for some more sveltekit videos in the near future, and maybe even a projects utilizing its features. Keep it up!

[@Huntabyte]

Thank you, I appreciate the kind words! I’m working on covering all the basics first, so that when I do create some projects, I won’t have to go in as much detail on all these individual parts!

[@svelterust]

This is really useful stuff that anyone that uses SvelteKit should know 😄

[@marktwain3083]

Prefetch is now implemented by default in SvelteKit. It's been renamed to "preload" and you can now choose if you want it to be activated on hover (default) or on click.

[@ksjitendra18]

Wow man. What an explanation. Very helpful video. Can't thank you enough for this.

[@Huntabyte]

Thank you! I'm glad it helped!

[@mohammad-aminebanaei886]

Amazing, I had trouble understanding the new version of sveltekit and you helped alot.

[@mikeeomega]

I really like the way you explained this... hope to see more content from you

[@Huntabyte]

Thank you! You can certainly expect that!

[@petemoss3160]

didn't realize this was exactly what i needed to know.

[@codenx2]

Very clear. No confusion at all.

[@mrbjjackson]

Excellent video thanks. Instant subscribe as I'm just digging into Sveltekit now.

[@Huntabyte]

Awesome to hear! Thanks for subscribing!

[@AB-gx5zj]

Really good videos. Makes learning sveltekit much easier, thank you!

[@Huntabyte]

Thank you!

[@babyfeavel71]

Very good explanation of the topic.🎉 I hope you can explain how to insert/update/delete rows with Supabase and Svelte Kit.

[@zzej]

straight to the point well explained. please consider posting more content on sveltekit :D

[@Huntabyte]

I certainly will! Anything in particular you’d like to see?

[@zzej]

@@Huntabyte Cookies, authentication, user session changed recently and I want to try to understand it better. It confuses me as to where exactly should I do authorized api calls page.server.js or page.js or page.svelte too many pages (this was helpful). Thanks for the reply!

[@Huntabyte]

@@zzej Noted & added to the list. Thank you for your feedback and suggestions! I greatly appreciate it!

[@justinoneill2837]

Big question in my mind is when to use the *load* function VS *store* VS *context* and how/if they tie together ... And then the best way to tie in *localstorage* / *db* / *websockets* . AND THEN the question, does it even make sense to use Svelte *{await}* blocks or native *fetch()* at the component level EVER AGAIN at this point? Why or Why not? Seems like there should be a recommended order for this but there's so many options. Would be awesome if you did a part 2 deep dive video on this! Keep up the great content bro!! Subscribed!!!

[@JOCS20]

Super helpful video. Thank you for taking the time to explain this so clearly and concisely. Bravo! Liked & Subscribed

[@Huntabyte]

Thank you, I appreciate that!

[@DamonMedekMusic]

Very great videos, I think you cover the back-end Sveltekit the best so far. Others teach a bunch of work arounds that won't work when you go into production. Thank you! I still have a lot to learn about importing local file json and editing it in the backend and returning it to client, like a poor mans database. It seems +page.server.js doesn't give me access to Node (fs) like I hoped.

[@Huntabyte]

No, it doesn't :/

[@DamonMedekMusic]

@@Huntabyte I think actually you can, fs.writeFileSync works inside load method or action post methods. with a try catch.

[@Huntabyte]

@@DamonMedekMusic Oh yes if you are running it on a node server but I believe with serverless you won't have that luxury. Added to my list of things to explore.

[@bonclairvoyant]

Thank you for this video, Hunter🙌.

[@kiana5066]

today I learned: devtools panel has its own command pallet 🤯 thank you!

[@andrewkillen5879]

great stuff. many thanks, its really made the recent breaking changes easy to pallet.

[@BoukeGroenescheij]

Amazing. Great helpful content which is to the point, and extremely well explained. I agree with all the comments, thank you so much! I'll hop on your Discord 🙂.

[@didiercatz]

Wow, what a great pace and explanation style. Instant sub.

[@Huntabyte]

Thank you!

[@Allformyequine]

So great! I learned a ton from this one!! Keep the SKit tuts going :) !!!

[@Huntabyte]

More to come!

[@LJ81824]

I wish I could thumbs up more than once!

[@Huntabyte]

Thank you!

[@shmusiccomp9417]

Is data-sveltekit-prefetch now data-sveltekit-preload-data? It seems to work the same and that's what shows in VS Code auto-complete rather than the prefetch variety. Thanks for this video! Your teaching style is inspiringly clear!

[@Huntabyte]

Yes!

[@shmusiccomp9417]

@@Huntabyte Just FYI for anyone else wondering, documentation for dotenv import is : import { YOUR_PRIVATE_KEY } from '$env/static/private'

[@LuigiVampa9]

Can't wait for more! Very informative, concise presentation. Subscribed :)

[@Huntabyte]

Thank you for the kind words and feedback! I already have a few more videos in the works at the moment!

[@RicardoCamisa]

Thanks so much for the wonderful class. Could you teach how to generate PDF with SvelteKit?

[@Huntabyte]

This is something I may consider in a future video, but if you can figure out how to generate one with Javascript, you could apply the same within the tags of your Svelte pages.

[@RicardoCamisa]

@@Huntabyte Thank you for your consideration

[@enkioki]

Love the thumbnail design btw

[@Huntabyte]

Thank you!

[@garethloot]

Hi there, really nice tutorials. I can not seem to find how you would do pagination with this setup. Does anybody have an idea how i trigger a reload with a button and getting the next batch to show?

[@Huntabyte]

You'd most likely want to take advantage of route params, so going to page/2 would show the 2nd batch of data for example.

[@garethloot]

Thanks, I was thinking to much from a single page application perspective but from a server side perspective that makes more sense.

[@Antonio-fo4fl]

This is weird I commented on this vid like 2 days ago saying that @ 11:40 you don’t have to use dotenv because you can use sveltekits built in env variable management. I guess maybe because I had a link to the sveltekit docs. But search up environment variables in the docs :)

[@Huntabyte]

Old habits die hard I guess! I will definitely check the docs for the best way to use env vars within SvelteKit. Thank you!

[@Huntabyte]

Also, I believe if you add links, KZbin will automatically remove the comment.

[@ridass.7137]

Quick question: in shop/+page.js there is limit=10 at the end of url, what would be the best practice to increase this number from frontend with something like select input "Products per page"?

[@Huntabyte]

You could do a force navigation or call goto() with the updated URL

[@GaspyKun]

Really really amazing video, thanks for making this 🥰

[@T--T]

thanks man, learning this framework so loving these vids!

[@omedjamal7509]

does the prop name inside shop(+page.js) should always be (data)? is this a constant name or we can change to something like(export let allProducts), which i did, but got an error?

[@Huntabyte]

Good question. It is always data. If you returned `allProducts` for example, you would access that with `data.allProducts`

[@meaningmean]

Nice video. Look forward for more sveltekit videos. TQ

[@Huntabyte]

Thank you! I look forward to creating more for you!

[@benbowden1827]

Loving these clips! Explanations are on point. Are we still subject to cors issues if using page.server.js ? Was going to spin up a proxy but still learning...

[@benbowden1827]

Nevermind... set it all up through the vite configuration file. Super easy!

[@kvetoslavnovak423]

Great to see new uptodate SvelteKit stuff

[@Huntabyte]

I'm glad to hear that!

[@heldim92]

Hey! Is this playlist teaching about sveltekit 1.0 or the previous version? I'm a complete beginner looking for resources...

[@Huntabyte]

This is pretty much 1.0 - there have been minor changes since the time I recorded and today but nothing major. If you look at the comments usually viewers will point out any small syntax changes.

[@heldim92]

@@Huntabyte Nice! Thanks for the fast reply. I'll use your videos then! Keep going!

[@mr.namazu1023]

Ive got a question on this: For example ive been using an API which has a request limit of 20 req/s and im using this on a +page.js.. do my server gets "banned" if 20+ users call the site for the same time because its fetching client AND server side? Or same at the page.server.js.. everytime a user clicks the Movie page the server is fetching the API, right? So Request Limits are a bit crashing everything, right?

[@Huntabyte]

You are correct about that. I briefly looked into solutions for this but became sidetracked with something else, as I also had a similar situation with a side project. I plan to do some more research to find a feasible solution in the near future.

[@mr.namazu1023]

​@@Huntabyte Ok thanks I have the confirmation for it now :) In my current project I work a lot with such an API and would like to do more server sided... but so easy in that case not possible. But I'm already thinking about hosting the API myself to get around this

[@loutremount860]

informative video thanks. but I have two very important question 1. when you on movies page and click movies link again its not call second time to page.server.js. (you have to refresh browser) is it bug? 2. fetch url actually expose when look at page source on browser. so what you mean as saying api url will not expose.

[@artneo7]

Awesome tutorial, thank you so much!

[@Huntabyte]

You're very welcome!

[@muhammedhalilovic8561]

Helped out a ton! Great work and thanks a bunch!

[@newbreed0707]

Great video and easy to follow along subscribed! If you could do a tutorial on how to best work with local storage and indexed db using sveltekit that would be awesome because working with client side api during dev is frustrating so far.

[@justinoneill2837]

I second that! Big question in my mind is when to use the *load* function VS *store* VS *context* and how/if they tie together ... And then the best way to tie in *localStorage* / *db* / *websockets*. AND the question, does it even make sense to use Svelte *{await}* blocks or native *fetch()* at the component level EVER AGAIN at this point? Why or Why not? Seems like there should be a recommended order for this but there's so many options. Would be awesome if you did a part 2 deep dive video on this! Keep up the great content bro!! Subscribed!!!

[@Shaparder]

God damn your Svelte videos are just top notch !!

[@Huntabyte]

Thank you!

[@kanways8]

can we use axios inside load function to load data ?

[@ismailakyayla7014]

Great explanation. Thank you.

[@Huntabyte]

Glad it was helpful!

[@parshantsingh9633]

Can we have both +page.server.js and +page.js ? Which will be given preference for the "data" variable in +page.svelte ?

[@Huntabyte]

Yes you can. If they are both returning the same properties, the +page will overwrite the +page.server. This is only if they are returning the same properties, otherwise they will be combined into a single return object.

[@castro6612]

Does using the load function also prevents memory leaks?

[@katewykes4850]

This may be off topic - but what extension are you using to get the browser to show (with multiple tabs) in the visual code?

[@MosiurRahman-dl5ts]

Is it safe to use async await without a try catch block? how are the errors handled?

[@Huntabyte]

SvelteKit does handle them generically when in load functions but in reality you should be catching/handling them.

[@Bukosaure]

Excellent content, truly.

[@Huntabyte]

Thank you!

[@idrissyed8989]

Is there a way to cache the data in the load function and not refetch on the route update(going back and forth)?

[@Huntabyte]

This is certainly possible! I will make a video soon for this.

[@bosung90]

Is it possible to return stream of data from server loading? (for example, used in infinite scroll loading)

[@Huntabyte]

I'm looking into this soon, I believe it would have to be client-side fetch requests rather than being loaded from a load function, don't hold me to that though.

[@bosung90]

@@Huntabyte It will be interesting to have this on both sides. SSR for initial load and additional load from client side

[@timeforrice]

Good stuff!! Now joining your Discord~~!!

[@Huntabyte]

Awesome!

[@trevordixon4503]

With svelte, what is practice if you have the same external api calls,, that need to be accessed from a number of pages? Can you make a global js page and import when needed into a specific page?

[@8DMafia]

Wonderful video 👋

[@Huntabyte]

Thank you!

[@simply-dash]

what theme do you use

[@Huntabyte]

GitHub Dark!

[@simply-dash]

@@Huntabyte thanks :)

[@ikai2]

great video, I have a silly question I want to fetch data but only when I submit the form, the load function does fetch automatically on the +page.server.js how do I prevent that

[@Huntabyte]

You can use a form action and return it via ActionData

[@ikai2]

@@Huntabyte thank you, I'll look into that and how to use it. I'm still newbie in svelte and would love to see more of your content.

[@CakRama01]

great content, i have question. how about we want fetch and pass data from the client? let say we want GET /shop?page={dynamic} and then page re fetch the data?

[@Huntabyte]

I have a video about dynamic routes that may assist with that!

[@amanuelelhanan4716]

Thank you for tutorial, but I couldn't still figure out how to update the data being sent when users clicks on refresh. It would be best if you could give such examples