Why Your Load Functions are Slow

Подписаться 24 тыс.

Просмотров 21 тыс.

50% 1

If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
In today's video, I'll be showing you how to improve the performance of your SvelteKit application by optimizing the way you return promises in load functions.
SvelteKit is a framework for building modern, high-performance, browser-based applications. It was developed by the team behind the popular Svelte framework and is powered by Svelte. Unlike other JavaScript frameworks, it doesn't use a virtual DOM or deliver a bloated and slow application.
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
- SvelteKit SSR
- SvelteKit Loading Data
- SvelteKIt Load Functions
- SvelteKit Data Fetching
- SvelteKit speed
- SvelteKit performance
- SvelteKit Server Load
__________________________________________
(Affiliate links may be included in this description. If you choose to purchase a product from one of those links, I may receive a small commission at no cost to you. Thank you for supporting the channel!)

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 79

@videosforthegoodlife2253 Год назад

I just wanted to say again that you are doing an awesome job. I think I've seen your subs grow like 5x, and it's well deserved. I know you have a high bar, and I think you are on the right path - and deserving. Cheers!

@Huntabyte Год назад

Wow thanks for the kind words! I appreciate it! I am super thankful for the growth I’ve experience the last few months, I hope I can continue to deliver and meet expectations!

@blokche_dev Год назад

Oh! Interesting. Thanks for sharing. Love this short format. Much easier to digest 😅

@TheOllieJT Год назад

Thank you for sharing!

@Huntabyte Год назад

You're welcome!

@kevinsaltarelli 11 месяцев назад

This came ON TIME!!! Thank you very much :)

@MrAbuYT Год назад

Thanks for sharing this helpful content. I look forward to seeing more of it.

@pascalwidmer3875 Год назад

Thanks, this really speeds up things a lot. One question: how do you throw errors like this? I get Promise { }, how and at what point do I determine if the request has failed?

@Huntabyte Год назад

Check my video on ‘Defer’ which might help answer this question!

@jeremycapital Год назад

Thank you for this. Trying to improve the core web vital for a project, will try this tips out.

@Plunzi 11 месяцев назад

Thanks, this is awesome I am actually in need for this rn. Thank you very much!

@AakashGoplani Год назад

This is a great technique and you explained it quite well. I wish we had something similar for universal load functions as well :(

@nextjust Год назад

Can you make a video about using Sveltekit and Graphql? How can we work with Graphql endpoints? What is the correct and safe method? Do we need to use any graphql gateway/package? I am eagerly waiting for your video, thanks for every contribution to the ecosystem.

@ihsanmohamad521 Год назад

houdini graphql are good

@bjul Год назад

Awesome video, thank you very much!

@Huntabyte Год назад

You’re very welcome!

@LukasSkywalker_ Год назад

Thanks. Just yesterday I was using Promise.all. Did not know about this on Sveltekit, thanks.

@Huntabyte Год назад

You're welcome!

@radimnedved1401 10 месяцев назад

Is this still up to date? Can't find it in documentation

@johnpeap Год назад

Awesome man, I would never find this myself.

@adimardev1550 10 месяцев назад

very useful information. thank you so much... really appreciate.

@insa1988 2 месяца назад

Awesome 🎉

@ABsazerNer Год назад

that's will be the heart of my project now, I'll modify any function, please can you tell me if supabase self hosted a good choice, in your experience? if there's a better can you suggest

@Huntabyte Год назад

Unfortunately, I don't have experience self-hosting Supabase!

@deephousefridays1911 Год назад

Great info, thank you!

@Huntabyte Год назад

My pleasure!

@Lukehagar Год назад

Fantastic Video!

@Huntabyte Год назад

Thanks, Luke!

@lian1238 Год назад

2:37 so you forgot to return await for b and c but it still worked. is arrow function implicitly returning? what is this called?

@jwankrho Год назад

No. Defining a function as "async" is simply a shorthand way of indicating that the function returns a new Promise object. This means that the function will resolve automatically, even if you don’t explicitly include a return statement.

@paundrakkkrishna3214 Год назад

❤️

@TruthWalker Год назад

Thanks!

@Huntabyte Год назад

Thank you Daniel, I appreciate that!

@hiranga Год назад

Super useful!

@Huntabyte Год назад

Glad it was helpful!

@SheeceGardazi 8 месяцев назад

waooo awesoem tut!

@kisaragi-hiu Год назад

In the final example, I think it's possible to put the fetch calls in the object being returned to save a wrapper function or two at the cost of that object looking more messy; is this correct? Thank you for teaching us various parts of SvelteKit regardless!

@Huntabyte Год назад

That is correct! I typically will move the functions elsewhere eventually so it’s nice to have them ready to cut and paste!

@AlexvanderValk Год назад

What happens if any of the promises rejects?

@Huntabyte Год назад

The closest error boundary is rendered.

@user-bw6oi5mf9y 2 месяца назад

With SvelteKit 2, the top-level promises are no longer awaited

@Huntabyte 2 месяца назад

This is true!

@piquelchips8992 Месяц назад

@@Huntabyte So how would you go about doing this if they are not resolved. Do I resolve the promises with await? cause that brings us back to square one. I have also seen people mention Promise.all(). How would that work? Thanks again for the great videos!

@hanshurtig5943 Год назад

Would it be possible to do this also when using API endpoints? I've tried, but so far haven't gotten anywhere.

@nobodyshomeuk Год назад

How do you handle the return not existing on "PageData" when using the methods? Is there a way to properly type it in TypeScript?

@Huntabyte Год назад

You can edit the PageData interface of the app.d.ts file!

@nobodyshomeuk Год назад

@@Huntabyte I see! I would have to include the part about it being a promise too right? Thanks for the reply!

@cami7o Год назад

Hi Hunter! If my request is done to Supabase for example, and I want to return to the page only a member from the "data" object that I should receive if the request is ok, how can I get the response from the Promise? using 'then'? Thanks!

@SebastianEling Год назад

You should await the call. The await will. resolve the promise, so that you get the "pure" type.

@jonathangamble Год назад

Confused on how to do error handling with this...

@TechBuddy_ Год назад

Why wrap a single function call in a wrapper function can't we just remove the await and directly pass the promise as the return value??

@Huntabyte Год назад

You can certainly do this if the data doesn't require further transformation from the initial request! If I'm fetching from an API I will typically want to also do a `return await response.json()` after the `fetch` has resolved, which would require me to wrap them.

@TechBuddy_ Год назад

@@Huntabyte well I'd chain a couple thens ( I am pretty sure thens return a new promise but I may be dumb so take that with a grain of salt )

@Huntabyte Год назад

@@TechBuddy_ I think it's all a matter of personal preference, I just prefer to wrap them! I think it makes it easier for others to visualize how they could potentially wrap some of their existing logic!

@TechBuddy_ Год назад

@@Huntabyte so my way works too right ?

@sachahjkl Год назад

@@TechBuddy_ yes it does

@jaideepshekhar4621 Год назад

Wait, am I missing something, or will just making promises obviously reduce time to the longest timeout, since nothing is actually happening, it's just waiting for end time. Otoh, fetching data is not waiting for time end, but you're actually doing something in that time?

@Huntabyte Год назад

The timeout was just a demonstration - I could have put actual fetch requests there but network speed can change slightly per request so I found it more difficult to explain that point.

@cemangcemang3471 Год назад

Can i render my HTML before Load resolve ?

@cemangcemang3471 Год назад

This is the answer i was looking for ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wTF9uunxSvA.html

@benny-shen Год назад

nice tips

@Huntabyte Год назад

Thank you!

@bbbbbbb6982 Год назад

Please make a vidio how to send a massage with redirect in sveltekit

@tger3773 9 месяцев назад

ㅎㅎ

@tger3773 9 месяцев назад

@nooalovern Год назад

or just: const [d1,d2,d3] = await Promise.all([res(3000), res(2000), res(1000)])

@Huntabyte Год назад

Of course, but SvelteKit does it automatically for you

@mody-pq8kd 9 месяцев назад

Promise.all can solve this problem and make your code more readable

@underview8492 Год назад

How is this different from await Promise.all()?

@Huntabyte Год назад

It's not, it's just done for you :)

@carlosmastin9852 Год назад

Promise.all or Promise.allsettelled should get you the same results, but definitely nice that Sveltekit can do this for you

@rohitkharche7562 Год назад

I wonder if Promise.all() will also achieve the same result

@Huntabyte Год назад

That's essentially what SvelteKit already does for you when you return promises in your load functions 🔥

@rohitkharche7562 Год назад

@@Huntabyte so what if promises have interdependence on each other will that also tank performance

@Huntabyte Год назад

@@rohitkharche7562 Yeah because if you think about it - you would HAVE to wait for one promise to resolve before using those results in the next request! There's no getting around that case.