Code inside setup is being run twice

[agile marsh]

Whenever I refresh my page, the forEach is being run twice. Both on server & client, resulting in duplicate ingredients (and hydration mismatch). If I just navigate to it (without ssr) it works.

Why is is the foreach run twice?

// ...
const { data } = await useApi<{ recipe: Recipe }>(`/recipes/${route.params.slug}`)

data.value.recipe.ingredients.forEach((ingredient: Ingredient) => {
  shoppingCart.add(ingredient.product);
})
</script>

[quartz coral]

Because the server needs to render the component to successfully generate server side html

[agile marsh]

Yeah, I understand. But when the server has rendered it, why is it still being executed on client?

[quartz coral]

Is it running twice when you access the url directly? Or when navigating to the page on the client?

[agile marsh]

When accessing directly

If i change my code so that instead of a forEach, it just sets the whole array, it works.