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
Смотрите видео 4+1 ways to fetch data with SvelteKit (ft. PocketBase) client-side, SSR, BFF 🛜 LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 467 раз и оно понравилось 27 людям.