I want to clarify the reason you don't have to set `export const prerender = true` when using the static adapter in this example is because we're using SPA mode with `fallback`: kit.svelte.dev/docs/adapter-static.
I always find my joy in Joy of Code. Thank you for always delivering enjoyable lectures. Sometimes, when I become lethargic as a developer, checking Joy of Code makes me feel like a passionate developer again.
this is what I needed. finally some detailed clarification about ssr vs csr and real life usage. till now it was all theory without knowing what the impacts in real life scenarios would be. need to rewatch it few times to memorize this. but thankfully this video exists.
Very informal video as always, but I have some critique: "YOU DON'T NEED A SERVER" is in my opinion misleading, but I might be nit picking. For a website you always need a server. The question is wether that server is only a static webhost like for example NGINX or a Node.js app responding to the requests. Having more than a static webhost also has not much to do with it doing SSR or CSR. You can perfectly fine host static content through for example a Node.js app and that can then still be either a MPA or a SPA. You might need the Node.js functionality to do some more advanced checks on requests but that does not make it server side rendered. Of course if you need SSR you need more than a server that just hosts static files. But also then you can still have a MPA or SPA. The relations between these buzzwords is complicated but disabling SSR has nothing directly to do with making an app a SPA. Technically you can display content on a SPA that was rendered on the server, so through SSR (think of HTMX replacing html contents sent by the server). You can also have a MPA (Mulit-Page Application) that does CSR (Client Side Rendering), meaning it renders the content into the html on the client but navigates to other pages through completely loading a new page. You said "client side routing" for CSR at 4:12 by mistake, which confused me a bit and I had to recheck the docs xD. I know the svelte kit docs thightly couple these concepts, also because how they are applied in svelte kit, but to really understand them we should learn what they mean in the general context of web development.
This didn't mention how to output a single js file that I can embed into an existing page and take over a target element. I'm still using vite for that and wondering if SKit supports this use case.
That prevents me from using sveltekit with my one client all the time. I don’t know where they drop my little apps into their system in advance so it all needs to be relative and I can’t go on the server and add logic for fallbacks so I use vanilla svelte and usually a super basic but not as nice to use hash router
What you are looking for is called an HTML custom element. You don't need kit for that, just use plain svelte. The documentation on the website lays it out quite nicely, I have used it for a couple of things and can say that deploying it is really nice. So far in my experience everything just works
Your videos are great. I love learning svelte with them, great work. Have you considered making a video on OAuth for a svelte app? There's not really a good one out there and I think you could get decent views on it with your presentation style
Hi Joy..you spoke on the other option about using the static adapter for an SPA. If you are making a dashboard is it best to go with the option that has a server or use the static adapter? I guess what im struggling with is i assume a static adapter should only be used for SSG (sites where the content very rarely changes, which wouldn't be good for a dashboard)
Astro is made to build static sites (sites that do not change), like marketing pages. But not intended to be used on web applications. Just static sites with little interactivity
Can you show how to make a 3d webapp using ; three.js, svelte, sveltekit, github pages, cloudflare pages, cloudflare workers and cloudflare D1 database?
I use python's included server to serve static pages after build step. Obviously this doesn't take into account other services running locally that may not be in the same deployment server when deployed.
SSR is great, but a lot of what I do is SPA so I'd love to know how thats possible with SvelteKit but so far I've not seen anything, gather this will build and output everything I need?
The server load fn does not support TypeScript, in fact I found Svelte's TS support to be very poor. That's the only DX reason for which I found Svelte not better than React, especially for complex apps.
No. SSR definitely has it's use cases and might be the best choice in a lot of scenarios but there are three big reasons that come to my mind against SSR and doing as much as possible on the client: The cost of just hosting static content on a cdn is way cheaper and the initial response are also faster when you can have all your assets on a cdn. In terms of security and trust you might also have a big advantage when you can tell your customers that their data is only processed on their machines and not sent to any server. This can be taken further with making a PWA and make your web app work without any internet connection. Reduced complexity on the side of the development. When you don't have to work with two different environments (server and client) you can simplify things and don't have to worry about the data transfer and connections. Although I have to note that in a lot of cases you just need a server for certain functionality. Some of the mentioned points still can be taken into consideration.
I want to clarify the reason you don't have to set `export const prerender = true` when using the static adapter in this example is because we're using SPA mode with `fallback`: kit.svelte.dev/docs/adapter-static.
Hey bro, how does your blog view count work? On every page load you increase value on database?
found your git repo, nice implementation
one of the best videos about SvelteKit keep it up
I always find my joy in Joy of Code. Thank you for always delivering enjoyable lectures. Sometimes, when I become lethargic as a developer, checking Joy of Code makes me feel like a passionate developer again.
this is what I needed. finally some detailed clarification about ssr vs csr and real life usage. till now it was all theory without knowing what the impacts in real life scenarios would be. need to rewatch it few times to memorize this. but thankfully this video exists.
Please do a svelte auth tutorial
Very informal video as always, but I have some critique: "YOU DON'T NEED A SERVER" is in my opinion misleading, but I might be nit picking.
For a website you always need a server. The question is wether that server is only a static webhost like for example NGINX or a Node.js app responding to the requests.
Having more than a static webhost also has not much to do with it doing SSR or CSR. You can perfectly fine host static content through for example a Node.js app and that can then still be either a MPA or a SPA. You might need the Node.js functionality to do some more advanced checks on requests but that does not make it server side rendered.
Of course if you need SSR you need more than a server that just hosts static files. But also then you can still have a MPA or SPA.
The relations between these buzzwords is complicated but disabling SSR has nothing directly to do with making an app a SPA.
Technically you can display content on a SPA that was rendered on the server, so through SSR (think of HTMX replacing html contents sent by the server).
You can also have a MPA (Mulit-Page Application) that does CSR (Client Side Rendering), meaning it renders the content into the html on the client but navigates to other pages through completely loading a new page. You said "client side routing" for CSR at 4:12 by mistake, which confused me a bit and I had to recheck the docs xD.
I know the svelte kit docs thightly couple these concepts, also because how they are applied in svelte kit, but to really understand them we should learn what they mean in the general context of web development.
I don't disagree.
Showing PWA would be good too.
This didn't mention how to output a single js file that I can embed into an existing page and take over a target element. I'm still using vite for that and wondering if SKit supports this use case.
My understanding is that it’s not possible with SKit. You need to just use vanilla Svelte…
Is there any reason why you need to do that in SvelteKit?
That prevents me from using sveltekit with my one client all the time. I don’t know where they drop my little apps into their system in advance so it all needs to be relative and I can’t go on the server and add logic for fallbacks so I use vanilla svelte and usually a super basic but not as nice to use hash router
What you are looking for is called an HTML custom element. You don't need kit for that, just use plain svelte. The documentation on the website lays it out quite nicely, I have used it for a couple of things and can say that deploying it is really nice. So far in my experience everything just works
Your videos are great. I love learning svelte with them, great work. Have you considered making a video on OAuth for a svelte app? There's not really a good one out there and I think you could get decent views on it with your presentation style
I want to make a video on Lucia but it always changes the API. 😂
Hi Joy..you spoke on the other option about using the static adapter for an SPA. If you are making a dashboard is it best to go with the option that has a server or use the static adapter?
I guess what im struggling with is i assume a static adapter should only be used for SSG (sites where the content very rarely changes, which wouldn't be good for a dashboard)
you can just use server-side rendering and decide on a per-route basis how you want to render that route
Awesome tutorial Thanks!
What about Astro?
If we already have SSR in svelte-kit?
or even Pre-Render?
Is there any significant improvement using Astro?
Astro is made to build static sites (sites that do not change), like marketing pages. But not intended to be used on web applications. Just static sites with little interactivity
@@danielbedoya6517 yes, but sveltekit in pre render is also a Static Site Generator...
I think maybe is equivalent to astro, isn't it?
Can you show how to make a 3d webapp using ; three.js, svelte, sveltekit, github pages, cloudflare pages, cloudflare workers and cloudflare D1 database?
I have some videos using Threlte but I'd love to make a tutorial.
@@JoyofCodeDev Thanks bro, I think it would be a cool stack that runs blazingly fast on the edge.
I use python's included server to serve static pages after build step. Obviously this doesn't take into account other services running locally that may not be in the same deployment server when deployed.
SSR is great, but a lot of what I do is SPA so I'd love to know how thats possible with SvelteKit but so far I've not seen anything, gather this will build and output everything I need?
Yeah! 😄
Is there any reason why you want to do that in SveletKit instead of just Svelte?
@@0xmassive526 You have options if you change your mind later and SvelteKit gives you routing and other useful features.
Ever tried to make something with Supabase? Looks promising with Sveltekit.
Supabase is neat.
Thanks!
Awesome! What does the best PWA setup look like?
Awesome
I know this is off-topic, but how do I make brave look like this?
by default it looks like that
He seems to be using a gtk version of it in gnome. Im not sure how you would replicate that look on windows but hopefully it helps to guide you.
I use Brave Beta.
Can I use sveltekit hooks in an SPA?
You can't because it requires a server.
#transitionalApps 😅🥰
The server load fn does not support TypeScript, in fact I found Svelte's TS support to be very poor. That's the only DX reason for which I found Svelte not better than React, especially for complex apps.
I might be missing something.
@@JoyofCodeDev what do you mean?
@@PaulSebastianM I don't understand how it doesn't support TypeScript when you have end-to-end type safety.
It does support it. Check the docs.
@@JoyofCodeDev when I tried it last, OOB experience following the tutorial, it didn't infer types.
WEB app should be SSR. Client should do lowest work possible.
Only a Sith deals in absolutes.
Depends if you want to unnecessary pay your cloud provider more than necessary
If you are building a mobile app or desktop app with Tauri, you can't do SSR so SPA is still relevant.
No. SSR definitely has it's use cases and might be the best choice in a lot of scenarios but there are three big reasons that come to my mind against SSR and doing as much as possible on the client:
The cost of just hosting static content on a cdn is way cheaper and the initial response are also faster when you can have all your assets on a cdn.
In terms of security and trust you might also have a big advantage when you can tell your customers that their data is only processed on their machines and not sent to any server. This can be taken further with making a PWA and make your web app work without any internet connection.
Reduced complexity on the side of the development. When you don't have to work with two different environments (server and client) you can simplify things and don't have to worry about the data transfer and connections.
Although I have to note that in a lot of cases you just need a server for certain functionality. Some of the mentioned points still can be taken into consideration.
Making an SPA is like gaining weight you don't have to try it's effortless