Sveltekit Data Fetching in 2024 Explained

Wanted to make a video going over how all the different forms of data fetching work in Sveltekit.

timestamps
0:00 intro
0:25 ways to fetch data
3:10 data/rendering trees
11:06 code example

[bmdavis]

- When using +page.ts to fetch from a public service you need to make it accessible both from the server (via Node.js fetch) and the client (by configuring CORS).

- Load functions run concurrently unless you "await parent()", don't think it was mentioned but has a big implication on the available data

- $effect is not equivalent to onMount, and onMount is not deprecated. If you do $effect and then untrack(..) everything inside it, it behaves like onMount. (because onMount never reruns)

- There is no caching of fetch. If you use Kit fetch in a .server file, you will get the inlined response in the SSR as a JSON blob. If you use Kit fetch in universal load, you will get the inlined Response object from the fetch you called on the server, which dedupes it from running again when page loads the second time in the browser.

[null]

Working with svelte for some months however this made me connect the dots. Thanks Ben.

[AnthonyCandaele]

Thanks for this very clear explanation on data fetching in Sveltekit. 👍

[mihaiandrei]

Awesome channel for svelte 😬. Thank you for sharing!

[rogerpence]

This is a superb video, Ben. Thank you. (Great on Theo's channel the other day, too)

[thompson_ian]

Could you do an in-depth video on error handling within svelte kit? Specifically using Supabase? This is one area I’m struggling to find great resources on

[AxelRock]

I knew all of this, but watched the video anyway, I just think it's so elegant and powerful, that I don't mind re-watching someone explaining it.

[qdorsa]

This is the best explanation I have seen. Subscribed and Liked

[Xarvo]

I had and still have the following problem with SvelteKit data fetching: For example, if I have loaded data from an external API in a +page.ts in the load function and return it to access it in the +page.svelte via the data prop, this data is not reactive. Especially if it is data that should be available across the entire application. I have to store it in something like a writable store or a state rune first, which is not ideal as it's one more step before the page can be rendered. I've also heard it's dangerous to do this on the server side. Whast if I e.g. wanted the resolved random string variable reactive and available within another component (14:35)?

[pjc]

Please do a video like this covering the proper use of stores and the context API using the latest rune implementations that will ensure state is not intermingled when you have multiple independent users of an application accessing data server side. You even mentioned in one of your older videos that you where not handling this incorrectly. I nice clear guide to the proper/correct way to implement this functionality would be greatly appreciated 💯🙂👍

[yash]

Would love that Hono video you mentioned

[aviorperetz]

It seems the best and funniest ui framework on the planet

[DunckingTest]

Hey, nice video. I have a video request if you don't mind, i would like you to do a video about all the libraries you use in your production svelte kit apps

[rahulagarwal]

What are your views on Kotlin Multiplatform ? Should I learn Flutter or KMP

[itsmdriaz]

Would be better if CSR mode data showing best practices are also shown in any video...🎉

[prashlovessamosa]

hey ben can you please make some sort of sveltikit crash course consist every major topic to build any web app.

[bossRODTV]

Hey Ben, awesome video 🎉 I just wanted to ask what is the reason why do you need to have both page.ts and page.server.ts?