Data Flow in Svelte 5 | How to fetch & pass data from the backend to the frontend in SvelteKit

[@o0OeftichisO0o]

WHAT A AMAZING VIDEO!!! THIS IS WHAT I NEEDED. THANK YOU!!

[@Niklas-Fischer]

Completely forgot to plug my udemy course on Svelte 5 in the video. If you like my teaching style, you'll find it in the description though :)

[@KevinMacKenzie61]

It's an excellent course. I highly recommend.

[@Crypt0xAC]

This is a great video. Your explanation of the load function is fantastic, and the prefetch aroused my interest.

[@CarlosLeon-ii2fs]

Extra rich content +12:00. Thanks to share it!

[@Niklas-Fischer]

really appreciate that! :)

[@BRODZELi]

Thank you! Your explanation was awesome. Please create more SvelteKit tutorials!

[@Niklas-Fischer]

Thank you so much! Really appreciate that and I want to in the near future. Just a bit difficult as these take time to make and I'm already juggling a lot of client work + a side project at the moment. But I already have a few additional topics I'd like to make tutorials about. Do you have anything specific on mind that you'd be interested in?

[@BRODZELi]

@@Niklas-Fischer Thank you for asking! I’d love to see a tutorial on implementing animations in a Svelte app using tools like Rive or Lottie. Specifically, how to control animations with Svelte (e.g., using HTML buttons or sliders to adjust stages or change the animation's color). It would also be amazing if you could include functionality to save the played animations as a video file (e.g., .mp4), similar to capturing gameplay footage.

[@Niklas-Fischer]

@@BRODZELi okay! I haven't done much with animations in Svelte yet, so I might not be the best person to ask, but I'll see what I can do :)

[@gageracer]

Great video. I would argue that in your case making it server side makes more sense as if the user has no internet, the client won't be able to fetch the thing anyway. Server side is always more secure and works good as much as client side fetch would.

[@Niklas-Fischer]

Thank you! :) In your example though, making it always server-side would also not work for people who don't have an internet connection in that moment, since the page will be generated upon request and the user could not trigger that request without an internet connection.

Nice to example. 🎉

[@good-dev-student]

Thank you 🎉

[@D_bugit]

In your point of view... Would you opt for using load function always unless otherwise serverload Function is needed?

[@Niklas-Fischer]

yes!! Exactly. And the main reason for a server load function being needed is usually to hide away credentials.

[@D_bugit]

@@Niklas-Fischer That is really interesting. Thanks 👍

[@EliSpizzichino]

I think you forgot to mention that if you structure your application's frontend with API endpoint that does the "secret"/backend stuff, you can then use page.ts's Load function to load data in. Am I correct?

[@Niklas-Fischer]

you're completely right. When the secret stuff is handled by another API, you can use the client-side load function. Would say though that I didn't forget about that because to me that's an "external" API in the sense, that it's outside the SvelteKit application.

[@good-dev-student]

pNPM save time + cpu

[@pookiepats]

no it is insecure and out of date

[@good-dev-student]

@pookiepats how what the heck?

[@EliSpizzichino]

I think it's useful to make a video about set/getContext, state, cookies/sessions in connection with the Load function.

[@Niklas-Fischer]

yup! Have a whole video planned on Auth in Svelte, where we'd talk about taht as well.

[@imalkesara4466]

Sir can u explain those things like what are hooks,session,layout.ts etc in a video , thank you

[@Niklas-Fischer]

Put this on my list! At the moment super busy with other stuff but trying to get back to it very soon :)

[@chidimbamalu3490]

Good one. Kindly apply enough ZOOM for Mobile viewers. Thank you

[@Niklas-Fischer]

thanks for the feedback!! Will try to do a better job of that for next time :)

[@good-dev-student]

Please use dark mode or simple bg css you hurt my eyes 👀

[@Niklas-Fischer]

haha sorry about that 😃 will use darker colours next time.

[@accountwizardindia8171]

In this case, it's an API to fetch data, but what if I have my own database and fetch using SQL? Which is better, +page.server.ts or +page.ts? Do you recommend always using an API to keep things more systematic?

[@Niklas-Fischer]

hey! So with a database, you definitely need a layer in between, but you can freely choose how that looks like. Either you have an external api, an api endpoint within your sveltekit app or you use a +page.server.ts file to connect to your database. But that layer has to be server-side, because if you build it client side anybody will have the access keys to your database. So it's not about being more systematic, it's really just about keeping your database safe :)

[@accountwizardindia8171]

@@Niklas-Fischer This is great!! I always get confused. Just one more Q, I see Tauri or Capacitor* to disable SSR I think*. So then how data really would flow if data base not static (updates daily)? How will you make a Mob App with Sveltkit in this case? Thanks in Advance!!