Uncached Props

By default, all properties passed to the svelte view helper are hashed into the cache key. This ensures safe cache invalidation when props change — but sometimes this isn’t desired.

Behaviour: Uncached props going around caching: they do not affect the cache key and are refreshed even on cached components.

Usage: Props within _uncached must only be used after hydration (e.g. when the user clicks the button), since they are not available during server-side rendering.

Example: A dropdown rendered in a list. The button always looks the same, but the panel content varies per row. To speed up the list, only the button needs to be cached — not the panel.

Example 

<%= svelte('dropdown', _uncached: { project: @project.to_svelte(:title) }, greeting: 'Hello') %>

The cache key depends on greeting, but not on _uncached.

Inside the component:

<script>
        let { greeting, _uncached } = $props();
</script>

Behavior

During server-side rendering (no hydration yet):

  • _uncached contains a placeholder string.
  • greeting contains "Hello".

After hydration:

  • _uncached contains the passed value, which is on this example the result of to_svelte.
  • greeting still contains "Hello".