Apparently I Don't Understand Svelte...
HTML-код
- Опубликовано: 7 июн 2024
- When working with SvelteKit I always assumed that my "+page.svelte" would always just be run on the client. I. Was. Wrong.
CHECKOUT THE SVELTEKIT TUTORIAL: learn.svelte.dev/tutorial/pag...
JOIN THE DISCORD: / discord
my stuff
twitter (x): / benjamin41902
timestamps
intro 0:00
ssr 0:45
csr 6:45
#webdev #svelte 
Наука
So stoked to see you continuing to dig in to svelte/sveltekit. It’s painful every time I have to go back to react now that I’m so comfortable with how svelte works. It just makes sense.
I'm using sveltekit for 6 weeks now, and this is new to me. Thanks for pointing this out.
Awesome video! Question please!!!: if i have an API with express, and i use SvelteKIT as an SPA, are there any BENEFITS to use the node adapter and run a new node script on my server, instead of using the static adapter in my regular VPS with apache?
this was really helpful! thank you
Great video. Consider watching it yourself to see where your editing fails.
You are repeating yourself and the user can’t see the console log because of your cam.
Thanks for making the video, I learned a lot!
Yea I completely missed a cut toward the end, but by the time I found it it was uploaded and with my internet I figure its not the end of the world lol
I miss the log outputs!
i would point out that this is the same gotcha with every ssr framework. in remix and nextjs code inside the component does run on the server too so top-level console logs are visible. the only code that doesn't get ran in react is code inside a useEffect, which is more or less the same as onMount for svelte.
Great video and well explained!
That is really great to know. SvelteKit is more complicated then I expected but I really like it. Would you make a tutorial migrating a project from nodejs to bun?
Probably will at some point, but it is SUPER easy, litterally just delete your node modules, delete your lock file, run bun install, and its done. THATS IT, bun is dope lol
@@bmdavis419Bun seems to be what I wanted deno to be.
Small comment, fetching data outside onMount function while having SSR disabled might be better in some cases since onMount function adds a little bit of delay, (it won't trigger the callback until the component is mounted on the DOM) similar to what useEffect does
thank you Ben
Does this concept effect anything in your SvelteKit and Supabase Deep Dive video? I am going through that video now and was wondering.
Nope, just what I said at the beginning where I said +page.svelte is client side which is only partly true
I´ve had the same feeling, thanks for the video.
That's a great gotcha! Thanks for sharing.
awesome video as always. brother, what theme, font and icons are you using for vscode?
Github theme, jetbrains mono font, no clue on the icons, I think default
37s into the video but I learned it the hard way with client side libraries not working and I needed to import them in an onMount :D
Link to the stream video? (the black and white video)
Its part of an upcoming video!
I probably knew it cause sveltekit is like next js every page.tsx will be server rendered unless you mention 'use client' on top
Great hook
export const ssr = false // ;) You are welcome
When I first started using SK I thought (for some reason) it was a MPA not a SPA.
It can be either which is interesting
@@bmdavis419 ooo... I'd have to look into this.
It's actually hybrid of the two. It by default technically is MPA, but as soon as js loads it becomes SPA. If you build you sites properly, for those with poor internet (thus not being able to load js) or those having js disabled it'd be MPA, while for normal users it'd be SPA.
Also as mentioned here certain routes can be only server rendered, with no js shipped, which will make those pages act more like MPA while the pages having client render will be a combination of MPA and SPA, and the one's having only client render will be SPA.
It's really interesting and sveltekit handles it very well. That's why you also have use:enhance, it's to make the client side experience even more SPA like while not completely disabling MPA.
Did you think a server can call itself as an api route?? 😂
I mean, you could maybe find a way, but I would just call the same function in both places
There are frameworks/libraries that do something similar to this, at least in concept. FeathersJS exposes its services as routes but they can also be called internally by other services. It's not as ridiculous as you are making it out to be to misunderstand how Svelte works.