4+1 ways to fetch data with SvelteKit (ft. PocketBase) client-side, SSR, BFF 🛜 LIVE Coding & Chill 🔴
Let’s tackle the same problem a few different ways: How can you fetch data with Svelte & SvelteKit? How *should* you?!
I often say, that if you can fetch some data, and render it nicely on the screen, you’ve got the technical expertise needed to be a web dev 😄 But there’s nuance in the approaches, and in the livestreams I almost always show the same one way!
Today, we’ll cover all bases, going over client-side data-fetching, server-side data-fetching “meta framework-style”, server-side data-fetching via an internal API & server-side data-fetching via an external API somewhere else in the company; maybe in the same monorepo 🕵️
🚀 Click around the app yourself: https://travel-pocket.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & travel-pocket
If you’re a beginner, you may want to start with our Portfolio "Paulina Puppers" series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5...
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today? Data-fetching strategies? What’s the app?
✅ The many ways to data-fetch overview!
✅ Just don’t 😎 (hardcoded data)
✅ “Svelte 5-style” Client-side data fetching: https://component-party.dev/?f=svelte...
✅ When is this “good”?
✅ “SvelteKit-style”, “sometimes” server-side data fetching with universal `load` methods: https://kit.svelte.dev/docs/load#page...
✅ Server-side data fetching with `+page.server.ts`: https://kit.svelte.dev/docs/load#univ...
✅ When is this “good”?
✅ Server-side data fetching via a `+server.ts` Endpoint! https://kit.svelte.dev/docs/routing#s...
✅ When is this “good”?
✅ Server-side data fetching via your own custom API!
✅ … But what’s Elysia anyway? https://elysiajs.com/
— BONUS —
✅ Implementation: Building an Elysia API!
✅ When is this “good”?
✅ Meaningful tests don’t care about the implementation details!
✅ Final 🥳 DEMO
✅ Next steps + LIKE 💜 SUBSCRIBE
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
PocketBase: https://pocketbase.io/
Turbo: https://turbo.build/
Vercel: https://vercel.com/johnnify
Fly.io: https://fly.io/
ElysiaJS: https://elysiajs.com/
Tailwind: https://tailwindcss.com/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 116!
—
TIMESTAMPS
—
00:00 - What are we doing today? Data-fetching strategies?
3:10 - What’s the app? A monorepo?
7:30 - The many ways to data-fetch overview!
8:07 - Just don’t 😎 (hardcoded data)
14:05 - Hardcoded data with SvelteKit in practice!
22:07 - Client-side data fetching theory
25:47 - “Svelte 5-style” client-side data fetching in practice!
55:15 - When is this “good”? Gotchas?
1:19:30 - “SvelteKit-style”, “sometimes” server-side data fetching with universal `load` methods:
1:36:00 - Stream data for “perceived speed” with UI skeletons!
1:48:08 - When is this “good”? Gotchas?
1:57:55 - Refactoring for “dependency injection”!
2:18:20 - Pagination with Search Params!
2:45:56 - Server-side data fetching via a `+server.ts` Endpoint!
2:59:35 - When is this “good”?
3:11:14 - Biggest brain 🧠 data fetching via your own separate API!
3:24:50 - … But what’s Elysia anyway?
3:27:15 - Implementation: Building an Elysia API!
3:50:43 - "Via Elysia API" + Swagger API reference demo!
3:53:00 - Summer 🧸 puppy cameo
3:54:05 - Meaningful tests don’t care about the implementation details!
4:01:21 - Final RECAP 🥳 DEMO
Watch video 4+1 ways to fetch data with SvelteKit (ft. PocketBase) client-side, SSR, BFF 🛜 LIVE Coding & Chill 🔴 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 467 once and liked it 27 people.