Avoid Leaking User Data In Your SvelteKit App

[@stoched]

For everyone that is confused here are the key takeaways: 1. Avoid accessing & mutating state in server environments (mainly your load functions) 2. Use contexts (setContext() + getContext()) to pass data down component trees to avoid prop drilling It is definitely a little confusing at first but once you understand that there are points in SvelteKit where that code gets executed on both the server and the client it starts to make sense. If you access/set some kind of state (think about global stores or some static class you made so you can access state anywhere) when the code is running on the server, you can accidentally leak data to other people. If you have SSR enabled, all of the top level code of your blocks in each page and component are executed on both the server AND the client. By using setContext('MY_COOL_CONTEXT', value: 0); that initial value is set on the server then on the client it is set AGAIN but the values aren't tied together. So once the page/component is rendered if you getContext('MY_COOL_CONTEXT') and update it, that change does NOT reflect on the server. Use caution if you immediately update context values on render instead of doing it in response to events like clicking on something or typing a value somewhere. If you absolutely have to then make sure the functions that update that state have proper guard clauses to only do it when you're in client land (typeof window === 'undefined') or certain clientside libraries are initialized - just something to make sure you don't inadvertently update state on the server. This is a where $effect() can be useful since that only executes on the client. Hope that helps! I agree that they should add a dedicated page in the docs on best practices with updating state and context. They have a small tid bit of info here svelte.dev/docs/svelte/context#Encapsulating-context-interactions but their description is very brief. This is definitely how you want to set and get context safely though. Unrelated but there are a bunch of "gotchas" when it comes to the new $state() runes where you can accidentally make values non-reactive. I wish they'd make a documentation page on this too. Just be careful if you have $state({ ... }) with some object then later destructure it. You can use the $inspect(myStatefulObject) rune to keep tabs on things in DEV environments. @JoyofCodeDev Nice video I really like when you jump in to Svelte's code to show how they are doing it. Definitely helps with understanding what's going on and what behaviors to expect from using different svelte features!

[@JoyofCodeDev]

the most important thing to know is: - the `load` function inside `+page.ts` runs on the server and client, unlike `+page.server.ts`, so it can be abused to keep the user state in sync on both sides - you should always return the data from the `load` function, and then update the state on the client because it's unique to the user

[@ariel_chess]

They have to update the documentation about this

[@joshuamacmaster5758]

I think the biggest thing no one mentions is that the context api creates a NEW state tree per REQUEST. I'm not sure why this isn't mentioned often because it makes understanding why it's used so much easier (beyond the component drilling benefit)

[@thedelanyo]

7:47 . I think with cookies, to some extent servers are statefull. That is why user auth model is shared between the server and client these days. Another example is theme setting, and any user specific setting and a cookie can hold.

[@MirSowasVonEgal]

How can I make the user in a component server side rendered without passing it as a prop? Is there a way to to this or was there a way explained? Context API, global stores and $page.data is all only csr.

[@Michael_moa]

I'd love a blog or video on invalidate and invalidateAll, there isn't much content in this.

[@josevilca3487]

The only thing that i really miss from svelte 4 is the auto update data, when it is updated by url state, now i need to use effect to update if the data changes. Please do a video for this

[@C4CH3S]

Ja-Son

[@couragic]

ZHISON 🤔

[@marcialabrahantes3369]

sounds French to me

[@cole5981]

kzbin.info/www/bejne/q4OQl2eYZaxsotE

[@EliSpizzichino]

@@cole5981 turns out it's the correct way of saying it!

[@good-dev-student]

Thank you

[@EasyViber]

znači žava skript i žson ili je samo žson sa ž?

[@AlexvanderValk]

I've solved this by subscribing to the Page store inside my custom store, instead of using the $effect to update my custom store. Any downsides to this approach?

[@JoyofCodeDev]

yeah since the page store uses the Context API

[@AlexvanderValk]

@@JoyofCodeDev Thanks for the reply. It works for me right now so i left as it. It's great to see that many people find this concept of server / client side confusing. I thought it was just me.

[@good-dev-student]

i have opened so many videos even i already watched to get ADS 😘😘 and support you for the new next videos love shared using signals of love ❤❤😍😍

[@JLarky]

JSON

[@zeyaddessouki890]

Great Content. can yu upload you code so that ONe can look at it again for better understanding, thx :)

[@EliSpizzichino]

I've still to understand the purpose of +page.ts why both on server and client?. I've recently tried to use it and realized it overcast the +page.server.ts 's load function... When to use it and what's the purpose/difference then running only on the server? I find it confusing, like there is no clear separation on .svelte either. Another thing I find confusing is why the data props are not reactive, I have to declare another variable one by one it's tedious and verbose...

[@JoyofCodeDev]

the short answer is because of server-side rendering

[@marcialabrahantes3369]

Jay-son - unless you're French? 🤔😉

[@Wombosvideo]

Or, hear me out, the inventor of JSON meant for it to be pronounced the way Joy of Code pronounces it.

[@HughBone]

@@WombosvideoAINT NO WAY

[@WaxN-ey6vj]

In short, just return data instead of using state.

[@oszi7058]

So basically just use your brain!

[@StarsOfMinecrafttr]

bruh this is nonsense tho, how can you leak user data, if you intentionally do share it you can but, that wouldnt be leaking you dont have to do that just use states bruh, if you login via ssr it might but still it shouldnt.

[@JoyofCodeDev]

I just showed you how

[@fottymutunda6320]

I am confused by what I just watched

[@JoyofCodeDev]

about what exactly? 😄

[@didiercatz]

then watch it again

[@fottymutunda6320]

@@JoyofCodeDev the pinned comment clarified it for me 😅

[@Cazineer]

What the hell did I just watch…

[@natedunn3933]

A KZbin video. Hope this helps.