Svelte 5: Document when not to use $effect

[dummdidumm]

Describe the problem

People tend to overuse $effect. We should make it clear in the documentation when to actually use it, and when to use other things instead.
This doesn't need to be on the preview docs but should certainly be part of the final docs.

Describe the proposed solution

If we have a more general guide for runes, describe how to ensure reactivity in various ways and try to avoid mentioning $effect as much as possible.

In the API section, within $effect, start by saying that you likely don't need $effect:

• If you want something to update in reaction to something else, use $derived
• If you want to have something update from above but also modify it from below (i.e. you want some kind of "writable $derived"), use an object with getters and setters instead (no glitches/dangers of infinite loops, works in SSR)
• other use cases I can't think of right now that are common

Importance

would make my life easier

[ptrxyz]

In that regard, I don't know if it's more a Kit issue than a Svelte issue, but since it came up on Discord:

The docs should also make clear that $effect does NOT straight up replace $: due to it not being executed on the server and for that reason does not run ruing SSR. Consider the following example (the effect here is a basic summation so this is probably not much of a deal, but it gets the point across):

These are not the same:

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{c}  // server responds with c == 0, then updates the DOM on mount (--> flicker, SEO, etc)

[benmccann]

I sent a PR for this awhile back that's fallen a bit down the queue: #9940