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.
This is the one gripe I have with using Sveletekit. As someone new to sveletekit its not really clear what code runs server or client-side. This is especially due to security reasons, some code you want definitely don't want to run on client and it could cause state issues if you think you are on client but it turns out it's server. Not to mention some libraries assume you are running a SPA as well. Whish they would be more clear with maybe a Macro or something
Yea it definitely has a learning curve. It gives you a lot of power, but u really do have to know what you are doing. Some better debugging tools would be extremely helpful to see exactly what is rendered when/where
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
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.
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
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.
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
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?
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.
![[Live] ศึกมหึมันส์มวยไทยสังเวียนเดือด เวทีมวยชั่วคราวสวนสยาม | จันทร์ 30 กันยายน 2567](http://i.ytimg.com/vi/pM1k6f7JXUc/mqdefault.jpg)
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.
export const ssr = false // ;) You are welcome
I'm using sveltekit for 6 weeks now, and this is new to me. Thanks for pointing this out.
This is the one gripe I have with using Sveletekit. As someone new to sveletekit its not really clear what code runs server or client-side. This is especially due to security reasons, some code you want definitely don't want to run on client and it could cause state issues if you think you are on client but it turns out it's server. Not to mention some libraries assume you are running a SPA as well. Whish they would be more clear with maybe a Macro or something
Yea it definitely has a learning curve. It gives you a lot of power, but u really do have to know what you are doing. Some better debugging tools would be extremely helpful to see exactly what is rendered when/where
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
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
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.
I probably knew it cause sveltekit is like next js every page.tsx will be server rendered unless you mention 'use client' on top
this was really helpful! thank you
I´ve had the same feeling, thanks for the video.
thank you Ben
That's a great gotcha! Thanks for sharing.
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
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.
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.
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!
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?
Great video and well explained!
Great hook
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.
Link to the stream video? (the black and white video)
Its part of an upcoming video!
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