How To Make A SPA With SvelteKit (SSR vs. CSR)

Рет қаралды 16,222

Күн бұрын

Пікірлер: 59

@JoyofCodeDev 8 ай бұрын

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.

@skelaw 8 ай бұрын

Hey bro, how does your blog view count work? On every page load you increase value on database?

@skelaw 8 ай бұрын

found your git repo, nice implementation

@arianitteamaxess674 6 ай бұрын

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.

@UsfCodes 7 ай бұрын

one of the best videos about SvelteKit keep it up

@qqee6200 6 ай бұрын

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.

@forno_nicolas 8 ай бұрын

Thanks!

@dc37wwe2kmods 6 ай бұрын

Please do a svelte auth tutorial

@21Guitars_ 7 ай бұрын

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

@JoyofCodeDev 7 ай бұрын

I want to make a video on Lucia but it always changes the API. 😂

@orientusprime 8 ай бұрын

Showing PWA would be good too.

@jhonyortiz5 8 ай бұрын

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.

@bensonmwaura9494 8 ай бұрын

Awesome! What does the best PWA setup look like?

@majdeddinebentahar5434 8 ай бұрын

Awesome

@cedigasser 8 ай бұрын

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.

@JoyofCodeDev 8 ай бұрын

I don't disagree.

@forno_nicolas 8 ай бұрын

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?

@danielbedoya6517 8 ай бұрын

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

@forno_nicolas 8 ай бұрын

@@danielbedoya6517 yes, but sveltekit in pre render is also a Static Site Generator... I think maybe is equivalent to astro, isn't it?

@daviidon 8 ай бұрын

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.

@cmoullasnet 8 ай бұрын

My understanding is that it’s not possible with SKit. You need to just use vanilla Svelte…

@0xmassive526 8 ай бұрын

Is there any reason why you need to do that in SvelteKit?

@MrBiggydicks 8 ай бұрын

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

@zBrain0 8 ай бұрын

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

@rawlespringer3917 2 ай бұрын

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)

@JoyofCodeDev 2 ай бұрын

you can just use server-side rendering and decide on a per-route basis how you want to render that route

@Noritoshi-r8m 8 ай бұрын

Ever tried to make something with Supabase? Looks promising with Sveltekit.

@JoyofCodeDev 8 ай бұрын

Supabase is neat.

@local9 8 ай бұрын

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?

@JoyofCodeDev 8 ай бұрын

Yeah! 😄

@0xmassive526 8 ай бұрын

Is there any reason why you want to do that in SveletKit instead of just Svelte?

@JoyofCodeDev 8 ай бұрын

@@0xmassive526 You have options if you change your mind later and SvelteKit gives you routing and other useful features.

@3dwebdev 3 ай бұрын

Can you show how to make a 3d webapp using ; three.js, svelte, sveltekit, github pages, cloudflare pages, cloudflare workers and cloudflare D1 database?

@JoyofCodeDev 3 ай бұрын

I have some videos using Threlte but I'd love to make a tutorial.

@3dwebdev 3 ай бұрын

@@JoyofCodeDev Thanks bro, I think it would be a cool stack that runs blazingly fast on the edge.

@rezebric1 8 ай бұрын

Can I use sveltekit hooks in an SPA?

@JoyofCodeDev 8 ай бұрын

You can't because it requires a server.

@leonardomarquine7828 8 ай бұрын

I know this is off-topic, but how do I make brave look like this?

@xade8381 8 ай бұрын

by default it looks like that

@leukk_ 8 ай бұрын

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.

@JoyofCodeDev 8 ай бұрын

I use Brave Beta.

@b1mind 8 ай бұрын

#transitionalApps 😅🥰

@PaulSebastianM 8 ай бұрын

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.

@JoyofCodeDev 8 ай бұрын

I might be missing something.

@PaulSebastianM 8 ай бұрын

@@JoyofCodeDev what do you mean?

@JoyofCodeDev 8 ай бұрын

@@PaulSebastianM I don't understand how it doesn't support TypeScript when you have end-to-end type safety.

@user-ce1pw5bp1m 5 ай бұрын

It does support it. Check the docs.

@PaulSebastianM 5 ай бұрын

@@JoyofCodeDev when I tried it last, OOB experience following the tutorial, it didn't infer types.

@tobias3581 8 ай бұрын

Making an SPA is like gaining weight you don't have to try it's effortless

@vladimirbelokur602 8 ай бұрын

WEB app should be SSR. Client should do lowest work possible.

@JoyofCodeDev 8 ай бұрын

Only a Sith deals in absolutes.

@definty 8 ай бұрын

Depends if you want to unnecessary pay your cloud provider more than necessary

@daleryanaldover6545 8 ай бұрын

If you are building a mobile app or desktop app with Tauri, you can't do SSR so SPA is still relevant.

@cedigasser 8 ай бұрын

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.