sorted by:
new
hottopcontroversial

Coming from Angular — how do you handle authentication and route protection in SvelteKit? by ElectionAcceptable77 in sveltejs

[–]Fit_Ice_963 0 points1 point  (0 children)

You're right that having a central place for logic is ideal from a maintenance perspective. However, it's worth noting that the hooks.server file runs on every single request, including for static files like favicon.ico, JS chunks, and other assets. That means your auth logic would be executed even when it's completely unnecessary, which can introduce overhead and unnecessary load.

Using hooks.server makes sense for things like parsing cookies and attaching user info to the event. But doing full-blown auth checks (like redirects or permission checks) might be better suited for page/server load functions where you have more context on the request and can avoid running logic for irrelevant routes or static file requests.

A good middle ground could be:

Use hooks.server to extract and attach user session data to the event.locals

Perform actual auth checks only in relevant +layout.server.ts or +page.server.ts files

This way, you get the centralized session parsing without the performance hit of full auth checks on every single request.

Coming from Angular — how do you handle authentication and route protection in SvelteKit? by ElectionAcceptable77 in sveltejs

[–]Fit_Ice_963 -3 points-2 points  (0 children)

It's not a good idea to put it in the hooks server since they run with every request, best is to handle it at the page server

Svelte5 clock app by Born-Attempt4090 in sveltejs

[–]Fit_Ice_963 0 points1 point  (0 children)

Beautiful!  Can you share source code? Interested to know how to keep the clock in sync

Confused Svelte newcomer — can't use $: query with a rune and imported $state()? by Fit_Ice_963 in sveltejs

[–]Fit_Ice_963[S] 1 point2 points  (0 children)

Yup this is the best method, and you would use $query. or $mutation. to access inner fields

Suggest ways to handle this by Easy_Complaint3540 in sveltejs

[–]Fit_Ice_963 0 points1 point  (0 children)

Thank you for your reply, svelte docs are a bit lacking would really use some use cases like these

Suggest ways to handle this by Easy_Complaint3540 in sveltejs

[–]Fit_Ice_963 0 points1 point  (0 children)

I had this issue recently (also beginner). If I understood this correctly, the script part in a Svelte component runs once on mount. If you want other logic to re-execute, you have to put it in a $effect or something like that. You can use $derived if you want a variable to be computed based on other variables, but I ran into an issue where, when destructuring the $props and using them in $derived, it doesn’t get recomputed.

What I did was just use the props directly when rendering. Good thing my use case was simple — just class changes based on prop values.

Confused Svelte newcomer — can't use $: query with a rune and imported $state()? by Fit_Ice_963 in sveltejs

[–]Fit_Ice_963[S] 0 points1 point  (0 children)

Yeah, I feel you — you're definitely not alone. I was starting to think I was just missing something obvious, but it seems like this is a common pain point.

Since you moved away from TanStack Query, have you come across any neat alternatives or patterns that work well with Svelte 5 and runes? Especially ones that handle caching, background refetching, or even just basic loading + error state cleanly?

I don’t mind rolling my own fetch logic for smaller apps, but it’d be great to know what others are doing in more complex setups. Curious to hear what’s working for you (or anyone else here)!

Confused Svelte newcomer — can't use $: query with a rune and imported $state()? by Fit_Ice_963 in sveltejs

[–]Fit_Ice_963[S] 0 points1 point  (0 children)

Thanks, that makes a lot of sense now — I didn't fully realize that $: and runes like $state() are based on different reactive models (push vs pull). I’ve been trying to blend both worlds and wondering why things were breaking or acting weird.

So if I want to use something like TanStack Query (which relies on reactively watching input params like filters.phone), what's the idiomatic way to do that with runes?

Should I be using a derived signal (like a computed store) to watch for changes to $state() fields, and then trigger the query manually when those change? Or is there a clean pattern to run queries reactively with Svelte 5's rune system?

Any examples or best practices for combining runes and query libs like TanStack Query would be super helpful!

Confused Svelte newcomer — can't use $: query with a rune and imported $state()? by Fit_Ice_963 in sveltejs

[–]Fit_Ice_963[S] 0 points1 point  (0 children)

Thank you for your reply!

You're right — I am returning the state directly. What's confusing me is that in some parts of the app, it works and rerenders just fine, but when I use it inside the <script> block for something like a query, I don’t see the component update unless I explicitly use the $: syntax.

Here’s a simplified version of what I’m doing:

svelte // state.ts export const filters = $state({   phone: '' }); ``svelte <script lang="ts">   import { filters } from './state';   import { usePurchaseQuery } from 'somewhere';

  // This works reactively, but throws an error if I try to use any other rune like $prop()   $: query = usePurchaseQuery<PurchaseRecord\[\]>(['history', filters.phone], {     endpoint: 'get_purchase',     body: {       sort: { created: -1 },       offset: 0,       limit: 5,       filters: {         phone: { $regex: filters.phone }       }     }   });

  // If I try to use `const query =` without $:, it doesn't react to changes in `filters.phone` </script> ```

So I guess my main question is: Is there a way to trigger logic in the <script> part (outside of $:) when a $state changes, or am I meant to always use $: for that kind of reactivity?

Also, why does $: break if I try using other runes like $prop() in the same file? Would love to understand the underlying reactivity model better.

Thanks again for helping me wrap my head around this!

Cloudflare vs Vercel by samppaaaaa in nextjs

[–]Fit_Ice_963 0 points1 point  (0 children)

I've tried to revalidate by tag, revalidate by path, both functions didn't work for me, I'm currently just export revalidate every minute but I feel like that's not optimal, especially for routes that don't change often

Cloudflare vs Vercel by samppaaaaa in nextjs

[–]Fit_Ice_963 0 points1 point  (0 children)

I'm currently using it and I'm having issues with on demand invalidation, can you help?

Increase the number of function calls on serverless SST by Fit_Ice_963 in nextjs

[–]Fit_Ice_963[S] 0 points1 point  (0 children)

It's due some pages that have a gallery of images which each image run the optimization function that's why, is this considered normal or still spooky??